如何在CSS中为多个元素添加hover效果并实现单个元素独立触发

嘿，我来帮你搞定这两个CSS hover效果的问题，咱们一个个来拆解：

你之前尝试的两种写法都没踩对路子，先给你说正确的核心逻辑：用逗号分隔多个目标选择器，然后统一加上:hover伪类，就能一次性给所有元素绑定hover效果了。

针对你的HTML结构，正确的CSS写法是这样的：

.itemOne:hover,
.itemTwo:hover,
.itemThree:hover,
.itemFour:hover,
.itemFive:hover,
.itemSix:hover,
.itemSeven:hover,
.itemEight:hover,
.itemNine:hover,
.itemTen:hover {
  /* 这里写你想要的hover样式，举个实际例子： */
  background-color: #e8f4f8;
  color: #2c3e50;
  cursor: pointer;
}

不过写10个选择器确实有点繁琐，给你个优化小技巧：给所有这些div加上一个共同的类名，比如menu-item，修改后的HTML会变成：

<div class="menu-item itemOne"> Menu Item One </div>
<div class="menu-item itemTwo"> Menu Item Two </div>
...
<div class="menu-item itemTen"> Menu Item Ten </div>

这样CSS就能简化成一行，维护起来方便多了：

.menu-item:hover {
  /* 你的hover样式 */
  background-color: #e8f4f8;
  color: #2c3e50;
  cursor: pointer;
}

顺便说下你之前写法的问题：

• .itemOne:hover .itemTwo:hover：这是后代选择器，意思是“当.itemTwo处于hover状态时，它内部的.itemOne元素应用样式”，完全和你的需求南辕北辙；
• .itemOne.itemTwo:hover：这要求元素同时拥有itemOne和itemTwo两个类时，hover才会生效，而你的每个div只有一个类，所以根本不会触发。

其实刚才的写法已经完美实现这个效果了！因为每个选择器都是独立的：当你把鼠标悬停在.itemOne上时，只有.itemOne:hover的样式会生效，其他div的hover样式不会被触发；同理，悬停在.itemTwo上时，只有它自己的样式会变化。

如果用共同类menu-item的话，效果也是一样的：每个带menu-item类的div，只有在自己被悬停时才会应用hover样式，其他div完全不受影响。

举个直观的效果例子：假设你设置hover时背景变浅灰，那么鼠标放到第一个div上，只有第一个变浅灰，其他还是默认样式，完全符合你的需求。

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