javascript - 悬停时为列表中的兄弟李项目设置样式

Question

基本上我有一个项目列表，当我将鼠标悬停在最后一个项目上时，我希望所有其他项目也更改其背景颜色。到目前为止，我尝试了一些解决方法，但没有成功。

<ul class ='profile'>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
</ul>

ul.profile > li:nth-child(3):hover {
  background-color: red;
}

标签： javascripthtmlcss

Answer 1

试试这个：

ul.profile:hover > li:not(:hover) {
  background-color: yellow;
}
ul.profile > li:nth-child(3):hover {
  background-color: red;
}