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

我会与piggbacks上你已经使用.hover类，就像一个规则做到这一点在CSS这样的：

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