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();
});

选择td内的元素

1 个答案: