Выберите элемент внутри td

Question

У меня есть следующий код jQuery для выделения ячеек таблицы.

Вот мой 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> 

вот мой JQuery код

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

Внутри ячейки таблицы, у меня есть скрытый <span> с именем класса hiddenImage. Как отображать изображение, когда я нависаю над этой ячейкой td?

Нечто подобное внутри функций (но ниже, кажется, не работает)

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

Answer 1

Я хотел бы сделать это в CSS с правилом, что piggbacks на .hover классе вы уже используете, как это:

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

Тогда ваш Jquery проще, а также:

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

---

Или, если вы не заботитесь о IE6, то просто сделать его полностью в CSS (не скрипт вообще):

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

---

Или, если вам нужно обязательно в JQuery (хотя это перебор), использовать .find(), чтобы получить элемент внутри, как это:

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