为所有未聚焦的 LI 添加透明覆盖层

Question

我在 LI 中有产品列表，我需要做的是，当我将鼠标悬停在某个产品上时，我需要所有其他 LI（产品）对其进行轻微覆盖，因此悬停在其上的产品更加突出。

任何帮助将不胜感激。

Answer 1

也许只需调整非悬停的 li 的不透明度并将悬停的 li 的不透明度设置为 1 即可？

ul:hover li {
  opacity: .8;
}
ul:hover li:hover {
  opacity: 1;
}

在 jsFiddle 上查看：http://jsfiddle.net/TXfKG/

更新：就像@amustil提到的，如果您关心IE6，您可以使用另一个属性添加对它的支持：filter: alpha(opacity=50);

Answer 2

你可以这样做jsFiddle：

HTML：

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
</ul>

CSS：

li { padding: 10px; background: #ccc; border: solid 1px black; cursor: pointer; }

jQuery：

var $listItems = $("ul li");

$listItems.hover(function() {

    $listItems.not(this).css("opacity", "0.5");

}, function() {

    $listItems.not(this).css("opacity", "1.0");    

});

Answer 3

这是一个纯 CSS 解决方案，带有针对 IE6 的 JS 修复。

http://jsbin.com/asico4/3

编辑：更新了链接，留下了拼写错误。