You lower the opacity of all alements except the hovered one with CSS.
The point is to lower the opacity of all <li>
elements when the parent (ul
) is hovered and to reset the opacity to 1 on the hovered li
element like this :
ul:hover li { opacity:0.5; }
ul li:hover { opacity:1; }
Here is a simple demo :
li{
float:left;
width:33.33%;
line-height:50px;
background:grey;
list-style-type:none;
}
ul:hover li{
opacity:0.5;
}
ul li:hover{
opacity:1;
}
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…