Select element inside of td
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 ce开发者_C百科ll?
Something like this inside the functions (but the below doesn't seem to work)
$(this '.hiddenImage').show();
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();
});
精彩评论