在悬停元素时更改列表（ul）的所有其他元素 li 的 css 属性

Question

我真的很想知道是否可以在悬停列表的一个元素时更改列表中所有其他元素的属性。

假设当我将鼠标悬停在“元素 2”上时，我希望其他元素：“元素 1”、“元素 3”和“元素 4”css 颜色属性更改为“红色”，而不是悬停的那个。

仅使用 css 就可以实现吗？是否有针对该实际功能的 css 选择器？

<ul id="list">
  <li class="element">element 1</li>
  <li class="element">element 2</li>
  <li class="element">element 3</li>
  <li class="element">element 4</li>
<ul>

Answer 1

最短和最优雅的解决方案使用:not 选择器：

#list:hover .element:not(:hover) {color: red}

<ul id="list">
  <li class="element">element 1</li>
  <li class="element">element 2</li>
  <li class="element">element 3</li>
  <li class="element">element 4</li>
<ul>