css悬停在li上，模糊所有其他答案

【问题标题】：css hover over li, blur all otherscss悬停在li上，模糊所有其他
【发布时间】：2010-11-10 14:40:30
【问题描述】：

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

谁能告诉我，当用户将鼠标移到包含c 的元素上时，是否可以使用css 来模糊包含a、d、e 的ul 元素，而不使用JavaScript？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

这将在所有li 上设置opacity:.5，除了被悬停的那个。

【讨论】：

【解决方案2】：

你的意思是这样的：

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;
}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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

【讨论】：