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

Question

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

谁能告诉我,如果有可能使用CSS来模糊ul包含元素a,d,e当用户在包含元素的移动鼠标c,不使用JavaScript？

Answer 1

你的意思是这样的:

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，除了被悬停的那个。