如何一次选择多个元素并在CSS

Question

如何选择多个div并将鼠标悬停在它们上面，以便在每个div上移动光标时，只有相应的div会悬停而不是全部在一起？

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

的CSS：

.itemOne:hover .itemTwo:hover{
   /*this is not working*/
}

或

.itemOne.itemTwo:hover{
  /*this is not working*/
}

Answer 1

您必须用逗号分隔每个选择器。

_ = axes_dspl[0]

更合适的解决方案是将相同的类添加到所有这些元素中。例如：

.itemOne:hover,
.itemTwo:hover,
.itemThree:hover {
    color: black;
}

Answer 2

为要添加悬停效果的所有div添加一个公共类

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

然后在css

中为悬停效果类添加样式

.hover-effect:hover {
 //add styles here
 }

Answer 3

给所有div一个普通的类 .commonclass：悬停{}