I wonder if there is a way to lower opacity (on hover) to all of the 'li's' except the one I'm actually hovering? Something similar to this picture:

Solution 1

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>