Javascript 设置悬停列表项的样式

基本上，我有一个项目列表，当我悬停在最后一个项目上时，我希望所有其他项目也改变它们的背景色。到目前为止，我尝试了一些变通办法，但没有成功

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

---

如果您只想在鼠标悬停在某个li上时更改整个ul的背景，那么您可以对指针事件使用一些css技巧

您需要使用指针事件设置：无，以及要使用指针事件悬停在其上的：auto

注意：由于禁用指针事件，链接等也将不起作用

例如，代码段：

ul.profile{ 指针事件：无； } ul.profile li:n-child3{ 指针事件：自动； } ul.简介：悬停{ 背景色：红色； } 项目1 项目2 项目3 试试这个：

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

---

为什么要使用>？？为什么不直接应用它呢？仅仅使用css并不能有效地实现这一点，你使用的是纯js还是jquery？没有任何选择器可以针对以前的同级。为此，您需要一个脚本，或者使用Flexbox，其中一个可以在视觉上显示一个订单，另一个可以在标记中显示。dupe链接也有一些技巧，Flexbox解决方案也包括在内。所有这些都必须是一个1列表吗？我认为这是一个很好的解决方案。我为您的答案制作了一个JSFIDLE：我不需要其他颜色为黄色的，但如果我将其更改为红色，不管我停在哪一个上面，另一个会被涂上颜色。只有列表的最后一项会触发悬停时其他链接的着色。这一项看起来像解决方案，但我现在无法单击其他链接

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