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

Question

当我悬停一个td元素时，如何更改td除悬停元素之外的所有元素的不透明度？

小提琴

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/

Answer 2

试试这个我想，它会在 IE 上工作。

table:hover td img {
  opacity: .5;
  filter:alpha(opacity=50);
}
table td img:hover {
  opacity: 1;
  filter:alpha(opacity=100);
}

演示

参考