table td或（div）opacity在悬停时更改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/

Answer 2

试试这个我认为，它适用于IE。

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

Demo

Reference