jquery - 表 td 或 (div) 悬停时不透明度会更改 td 或 (div) 的其余部分

Question

当我将鼠标悬停在 td 元素上时，如何更改所有 td 元素(悬停的元素除外)的不透明度？

fiddle

html:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>  
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>  
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>  
    </tr>
  </table>

Answer 1

创建一个规则，用于将鼠标悬停在改变包含的所有图像的不透明度的表格上。然后，您可以为悬停的 img 创建一个规则，将不透明度设置为 1。重要的是设置单个图像的不透明度而不是整个表格，因为子项不能比其父项更不透明。

table:hover td img {
    opacity: .5;
}
table td img:hover {
    opacity: 1;
}

http://jsfiddle.net/n9MmT/1/