选择 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]
    }
);

在表格单元格内，我有一个隐藏的 ，其类名为 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();
});