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

All Event Monitor

Leveraging the GetListItems method via an Ajax request in SharePoint 2010

Switch up the Background using .css and jCarousel

Error encountered: Required closing JSX tag for <CCol> was missing

Is it possible to include two of these on a single page with unique variables? (Using JQuery)

Organize the HTML output generated by a PHP array

Discover the steps to dynamically alter the inclusion of the Bootstrap CSS file within an Angular project

Can someone provide guidance on creating a JavaScript function that locates an image within an <li> element and sets that image as the background-image property in the li's CSS?

Python Selenium Timeout Exception Handling

How can I design an avatar image within a button similar to Facebook's style?

Contrast between gmaps and traditional cross-domain AJAX queries

A versatile JavaScript function built to efficiently validate numerous forms across a webpage

Want to learn how to create a draggable uploaded image on a canvas, similar to the functionality of Google

The concept of CSS "preload" animation

Combining element.scrollIntoView and scroll listener for smooth scrolling by using JavaScript

What is the best way to run a function after 10 seconds of inactivity using jquery?

Achieving perfect centering in PrestaShop using CSS for both horizontal

Can you explain the mechanics behind Google Voice Search? And is there an available API for it?

Images do not appear on Bootstrap Carousel as expected

Incorporate dynamic body color changes across all pages using AngularJS