Change opacity on all elements except hovered one

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>