views:

32

answers:

1

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();
+3  A: 

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();
});
Nick Craver
@Nick Craver - isn't it `td:hover`?
GenericTypeTea
@GenericTypeTea - look at his function :)
Nick Craver
@Nick Craver - +1 Oh yea. That's exactly why using reserved words is bad :P
GenericTypeTea
@Nick Craver - this is showing the image for ALL td's not just the one i am hovering
ooo
@ooo - What do your current styles look like? Looks like you have a specificity problem...also, which of the above options are you trying to go with? :)
Nick Craver
@Nick Craver - I have edited the question to be a little clearer. have a read again. When i hover over the cell i want this image (which is wrapped in the .hiddenImage tag) to show and disappear when i leave that cell
ooo
@ooo - Here's option 1: http://jsfiddle.net/nick_craver/P5zwe/4/ option 2: http://jsfiddle.net/nick_craver/P5zwe/5/ and option 3: http://jsfiddle.net/nick_craver/P5zwe/3/ ....which part isn't working? :)
Nick Craver
@Nick Craver - thanks, i was getting confused over my class hover as well. once i changed it to day and saw your example, it seems so clear
ooo