Here is what I am trying to achieve (not sure if it's even possible):

Hover the mouse over a td, and in the bottom right corner of that td (perhaps overlapping the cell border), show a small image.

I'm okay with jQuery, so I can handle the hovering, but the CSS kills me. How do I position the image? Would I have the image in every cell, and only show it on hover? Or is there a better way?

I'm on IE7. I appreciate any guidance.

Here is what I am trying to achieve (not sure if it's even possible):

Hover the mouse over a td, and in the bottom right corner of that td (perhaps overlapping the cell border), show a small image.

I'm okay with jQuery, so I can handle the hovering, but the CSS kills me. How do I position the image? Would I have the image in every cell, and only show it on hover? Or is there a better way?

I'm on IE7. I appreciate any guidance.

• javascript
• jquery
• html
• html-table
• hover

Share Improve this question Follow edited Jul 17, 2017 at 9:37 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked May 20, 2011 at 13:42 user686605user686605

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

To avoid putting an image into every single td in the page you could also use a background image:

td{
  background-image: url('/yourImage.png');
  background-position: -2000px -2000px;
}

td:hover{
  background-position: right bottom;
}

The reasoning for using the initial offset is that it makes sure that the image is pre-loaded with the page and so there's no lag during the first mouseover.

Browser support issues

I'm not sure how well supported the positioning directions are for different browsers and you may also want to check out this article to make sure that the :hover pseudo class works correctly for your target browsers. IE7+ will support the :hover pseudo class but they need the correct doctype (and a good prevailing wind) http://www.bernzilla./item.php?id=762

Using jQuery instead

If you don't want to use :hover you can stick to jquery to add and remove a class. The equivalent CSS for that would be:

td{
  background-image: url('/yourImage.png');
  background-position: -2000px -2000px;
}

td.hoverclass{
  background-position: right bottom;
}

where ".hoverclass" is the classname that you add to the td during the mouseover period.

Something along the lines of this will show and hide images in a td.

td img
{
 display:none;
}

td:hover img
{
 display:block;
}

To do the positioning, what you want to use is absolute positioning. The CSS would be:

#id-of-td {
    position: relative;
}

#id-of-image {
    position: absolute;
    right: 0;
    bottom: 0;
}

The HTML should be similar to:

<td id="id-of-td">
    <img id="id-of-image" src="path/to/image" />
</td>