Ways to implement div on hover in my table's td cells

Question

Ways to implement div on hover in my table's td cells

Here is the HTML table code I have:

<table border='1px'>
<tr>
 <td id='td'>first</td>
 <td>last</td>
<tr>
 <td id='td'>newFirst</td>
 <td>newSecond</td>
</table>

In addition to that, here is a div with the class "Not_Editable'id-left':

<div class="Not_Editable id-left" >Not Editable</div>

I want this div to appear when hovering over the first td of the table row and not on the second td.

This CSS is used to style the div as a title label:

<style>
.Not_Editable {
  position: relative;
  background-color: #292929;

  width: 100px;
  height: 30px;
  line-height: 30px; /* vertically center */

  color: white;
  text-align: center;
  border-radius: 10px;

  font-family: sans-serif;
}
.Not_Editable:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 15px solid;
}
.id-left:after {
  border-right-color: #292929;

  top: 50%;
  right: 95%;
  margin-top: -15px;    
}
</style>

You can view the example on jsfiddle here. Feel free to help me figure out how to achieve this effect.

jquery html css hover

Answer 1

Answer №1

View the live demo here: http://jsfiddle.net/cse_tushar/G6Cwe/4/

HTML Code:

<div class="Not_Editable id-left"><div class="triangle"></div>Not Editable</div>
<table border='1px'>
    <tr>
        <td class='td tr'>first</td>
        <td>last</td>
    </tr>
    <tr>
        <td class='td tr'>newFirst</td>
        <td>newSecond</td>
    </tr>
</table>

CSS Styling:

.Not_Editable {
    display:none;
    position:absolute;
    background-color: #292929;
    width: 100px;
    height: 30px;
    line-height: 30px;
    color: white;
    text-align: center;
    border-radius: 10px;
    font-family: sans-serif;
}
.triangle {
    display:none;
    position:absolute;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right:15px solid #292929;
    margin-left:-10px;
}

Javascript Function:

$('table tr td:first-child').mousemove(function (e) {
    $('.Not_Editable').css('top', (e.clientY + 10) + 'px').css('left', (e.clientX + 10) + 'px').show();
    $('.triangle').show();
}).mouseout(function () {
    $('.Not_Editable').hide();
    $('.triangle').hide();
});

Answer 2

View the live demo here: http://jsfiddle.net/cse_tushar/G6Cwe/4/

HTML Code:

<div class="Not_Editable id-left"><div class="triangle"></div>Not Editable</div>
<table border='1px'>
    <tr>
        <td class='td tr'>first</td>
        <td>last</td>
    </tr>
    <tr>
        <td class='td tr'>newFirst</td>
        <td>newSecond</td>
    </tr>
</table>

CSS Styling:

.Not_Editable {
    display:none;
    position:absolute;
    background-color: #292929;
    width: 100px;
    height: 30px;
    line-height: 30px;
    color: white;
    text-align: center;
    border-radius: 10px;
    font-family: sans-serif;
}
.triangle {
    display:none;
    position:absolute;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right:15px solid #292929;
    margin-left:-10px;
}

Javascript Function:

$('table tr td:first-child').mousemove(function (e) {
    $('.Not_Editable').css('top', (e.clientY + 10) + 'px').css('left', (e.clientX + 10) + 'px').show();
    $('.triangle').show();
}).mouseout(function () {
    $('.Not_Editable').hide();
    $('.triangle').hide();
});

Answer 3

Answer №2

Here is a possible solution:

To start, create a table with specific rollover functionality:

<table border='1px'>
<tr>
 <td class="td not-editable">first</td>
 <td>last</td>
<tr>
 <td class="td">newFirst</td>
 <td>newSecond</td>
</table>

(Note: use classes instead of ids if they are not unique)

Next, insert the div into the td when a user hovers over the element (and remove it on mouseout):

var el = $('<div class="Not_Editable id-left" >Not Editable</div>');

$('td.not-editable').on('mouseover', function(e) {
    var b = e.target.append('el');
    e.target.on('mouseout', function(e) {
        b.remove();
    });
});

I have not tested this code, but it should be a step in the right direction for implementing this feature using JavaScript.

Answer 4

Here is a possible solution:

To start, create a table with specific rollover functionality:

<table border='1px'>
<tr>
 <td class="td not-editable">first</td>
 <td>last</td>
<tr>
 <td class="td">newFirst</td>
 <td>newSecond</td>
</table>

(Note: use classes instead of ids if they are not unique)

Next, insert the div into the td when a user hovers over the element (and remove it on mouseout):

var el = $('<div class="Not_Editable id-left" >Not Editable</div>');

$('td.not-editable').on('mouseover', function(e) {
    var b = e.target.append('el');
    e.target.on('mouseout', function(e) {
        b.remove();
    });
});

I have not tested this code, but it should be a step in the right direction for implementing this feature using JavaScript.

Answer 5

Answer №3

Does this look suitable?

$('#td1').hover(function(){
$('.Not_Editable').show();
},function(){
$('.Not_Editable').hide();
});

Rectified the html, modified the id to td1 & td2 and closed the <tr>

Check out the Demo

Answer 6

Does this look suitable?

$('#td1').hover(function(){
$('.Not_Editable').show();
},function(){
$('.Not_Editable').hide();
});

Rectified the html, modified the id to td1 & td2 and closed the <tr>

Check out the Demo

Answer 7

Answer №4

It seems that the issue lies in the lack of unique ids for your td elements, which is not considered valid.

Based on my observation, it appears that you may be using an id selector expecting to retrieve multiple results. However, id-based selectors typically return either 0 or 1 element.

To clarify this further, if your code looks something like this:

$('#td').hover(function(){...}, function(){...});

The event handler will only be applied to the first td element that matches the selector.

To compound matters, there are errors in your table HTML. It should resemble the following structure:

<table border='1px'>
<tr>
 <td class='td'>first</td>
 <td>last</td>
</tr>
<tr>
 <td class='td'>newFirst</td>
 <td>newSecond</td>
</tr>
</table>

In light of this correction, you could update your JavaScript logic as follows:

$('table .td').hover(function(){...}, function(){...});

Answer 8

It seems that the issue lies in the lack of unique ids for your td elements, which is not considered valid.

Based on my observation, it appears that you may be using an id selector expecting to retrieve multiple results. However, id-based selectors typically return either 0 or 1 element.

To clarify this further, if your code looks something like this:

$('#td').hover(function(){...}, function(){...});

The event handler will only be applied to the first td element that matches the selector.

To compound matters, there are errors in your table HTML. It should resemble the following structure:

<table border='1px'>
<tr>
 <td class='td'>first</td>
 <td>last</td>
</tr>
<tr>
 <td class='td'>newFirst</td>
 <td>newSecond</td>
</tr>
</table>

In light of this correction, you could update your JavaScript logic as follows:

$('table .td').hover(function(){...}, function(){...});

Answer 9

Answer №5

Even more amazing: a fantastic pure CSS fix

HTML

<table border='1px'>
    <tr>
             <td class="box not-changeable">Top<div class="Not_Changeable id-left" >Do Not Change</div></td>
             <td>Bottom</td>
        </tr>
        <tr>
             <td class="box">NewTop</td>
             <td>NewBottom</td>
         </tr>
    </table>

Additionally, the CSS

td.not-changeable > .Not_Changeable {
    display: none;
}

td.not-changeable:hover > .Not_Changeable {
    display: block;
}

Answer 10

Even more amazing: a fantastic pure CSS fix

HTML

<table border='1px'>
    <tr>
             <td class="box not-changeable">Top<div class="Not_Changeable id-left" >Do Not Change</div></td>
             <td>Bottom</td>
        </tr>
        <tr>
             <td class="box">NewTop</td>
             <td>NewBottom</td>
         </tr>
    </table>

Additionally, the CSS

td.not-changeable > .Not_Changeable {
    display: none;
}

td.not-changeable:hover > .Not_Changeable {
    display: block;
}

Ways to implement div on hover in my table's td cells

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Guide to implementing tooltips for disabled <li> elements in AngularJS

easy method for creating a hyperlink that triggers a "download" pop-up box

Tips for responding to and disabling a specific button in Vuetify.js after clicking the follow or unfollow button

What are some techniques for highlighting the significance of specific items within an unorganized list?

What are the steps for implementing the Ionic 2 Pulling Refresher feature in my application?

Transform a Div element into an image, ensuring compatibility with Internet Explorer 7 and 8

What is the proper way to showcase thumbnails in different sizes?

unselect the button using jQuery

Uploading images simultaneously while filling out a form

Is your Navbar having trouble readjusting its height?

Is there a way to incorporate HTML code into a fullCalendar 4 event title?

One-time execution of timed event

Update Relative Links using JQuery or JavaScript

What could be causing the whitespace around this element when using SASS from Refills / Bourbon.io?

Caution: The `className` property does not align with Material UI css which may cause issues upon reload

JavaScript providing inaccurate height measurement for an element

Please input only 0s and 1s into the designated field

List of prices with a dotted line separating the price and product, adjusting its width based on

Functionalities for retrieving nested JSON data structures

"Exploring the Functionality of Dropdown Menus in ASP.NET Core 1