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

Answer 1

只需尝试一下：

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

Answer 2

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

您需要将{ul>设置为pointer-events: none;，并将要悬停的

设置为pointer-events: auto;。

注意：由于您禁用了指针事件，因此链接等也不起作用。

示例代码段：

ul.profile {  
    pointer-events: none;
}

ul.profile li:nth-child(3) {
    pointer-events: auto;
}

ul.profile:hover {
    background-color: red;
}

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

悬停列表上样式平移的li项目

2 个答案: