css悬停在li上，模糊了所有其他人

Question

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

当用户将鼠标移到包含该元素的元素上时，是否可以告诉我是否可以使用css模糊包含ul，a，d的{​​{1}}元素e，不使用JavaScript？

Answer 1

你的意思是这样的：

http://jsfiddle.net/S4TMS/

<强> HTML

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>

<强> CSS

ul li {
    background-color: red;
    margin: 2px;
}

ul:hover li {
    opacity: .5;
}

ul li:hover {
    opacity: 1;
}

Answer 2

与使用多个选择器相反，您可以使用:not选择器将它们合并为一个。

ul:hover li:not(:hover) {
    opacity: .5;
}

这会在所有opacity:.5上设置li，而不会覆盖所有{{1}}。

jsFiddle here

Answer 3

Here是你追求的一个很好的例子。该代码示例演示了如何模糊除了悬停元素之外的所有内容。

Answer 4

您可以尝试使用something like this，由于text-shadow属性，所有浏览器均不支持此选项：

ul:hover li {
    text-shadow: 0px 0px 3px black;
    color: transparent;
}

ul:hover li:hover {
    text-shadow: none;
    color: black;
}

编辑：添加了上面一个jsfiddle的链接，因为这显然是让你获得投票的很酷的东西。 ：P