Question

I have the following jQuery code to highlight table cells.

Here is my html:

<table>
   <tr>
        <td class="day">
             <span class='hiddenImage'><img src='/images/test.png' /></span>
        </td>
        <td class="day"><span class='hiddenImage'><img src='/images/test.png' /></span>
        </td>
   </tr>
</table>

here is my jquery code

$("td").hover(
    function () {
          [show image]
    },
    function () {
          [hide image]
    }
);

Inside the table cell, i have a hidden <span> with class name hiddenImage. How do I display the image when i am hovering over that td cell?

Something like this inside the functions (but the below doesn’t seem to work)

 $(this '.hiddenImage').show();

Answer 1

I would do it in CSS with a rule that piggbacks on the .hover class you’re already using, like this:

td.hover .hiddenImage { display: inline-block; }

Then your jQuery is simpler as well:

$("td").hover(function() {
  $(this).toggleClass("hover");
});

---

Or, if you don’t care about IE6 then just do it completely in CSS (no script at all):

td:hover { ...styling... }
td:hover .hiddenImage { display: inline-block; }

---

Or if you must in jQuery (though it’s overkill), use .find() to get an element within, like this:

$("td").hover(function () {
  $(this).toggleClass("hover").find(".hiddenImage").toggle();
});