如何在hover列表中某一li元素时修改其他li的CSS属性？

当然可以仅用CSS实现这个需求！完全不需要JavaScript，咱们靠CSS选择器就能轻松搞定。

最靠谱的方法是借助父容器的 hover 状态批量控制子元素，再单独排除当前被 hover 的项：

1. 当鼠标悬停在父容器 <ul> 上时，先把所有子 <li> 的文字颜色改成红色；
2. 再针对当前被 hover 的 <li>，把它的颜色重置回默认值（或你想要的原本样式）。

这种方法能覆盖所有兄弟元素，不管当前 hover 的元素在列表中的位置是前是后。

完整代码示例 #

HTML 结构

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

CSS 样式

/* 默认样式 */
#list .element {
  color: #333;
  padding: 8px 12px;
  cursor: pointer;
  transition: color 0.3s ease; /* 可选：添加过渡动画让颜色变化更平滑 */
}

/* 父容器hover时，所有子li统一变红 */
#list:hover .element {
  color: red;
}

/* 单独重置当前hover的li颜色，覆盖上面的规则 */
#list .element:hover {
  color: #333; /* 和默认颜色保持一致 */
}

补充：另一种局限性方法（通用兄弟选择器） #

如果你只需要控制当前 hover 元素之后的兄弟元素，也可以用通用兄弟选择器 ~，但它没法影响 hover 元素前面的项：

/* 仅让hover元素之后的所有兄弟li变红 */
.element:hover ~ .element {
  color: red;
}

这种方法适合特定场景，但大部分情况下，父容器控制的方法适用性更广。

内容的提问来源于stack exchange，提问作者Damien Sellier