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

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 с правилом, что контрейлер в классе .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();
});