悬停项目时更改其他列表项的 CSS答案

【问题标题】：Change other list items' CSS when hovering an item悬停项目时更改其他列表项的 CSS
【发布时间】：2023-04-10 10:52:01
【问题描述】：

悬停列表项时如何更改其他项的 CSS？我的意思是，当我将鼠标悬停在Item 1 上时，我希望其他人 具有，比如说，情人不透明度以产生突出效果。我更喜欢纯 css，但如果不可能，也可以欣赏 jquery。谢谢。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

【问题讨论】：

【解决方案1】：

试试这样的：

ul:hover li {opacity: 0.5;}
ul li:hover {opacity: 1;}

【讨论】：

【解决方案2】：

jQuery 解决方案是$(ul.li:not(:hover))，但正如@Shomz 所说，使用 CSS 绝对可以。

【讨论】：

【解决方案3】：

 $('li').on('mouseenter',function(){
    $(this).siblings().css(...);
 });

【讨论】：