JQuery Remove or change other list items on hover

Question

How can I change the color on hover and at the same time smooth out the other colors and / or opacity.

Simple three elements of a list, enclosed in it is an unordered list.

These list items change color on hover.

code:

.right-side .headlines li a,.right-side .headlines li{font-size:36px;color:#999} .right-side .headlines li a:hover{color:#0976ca} <ul class="headlines"> <li> <a href="#">Headline 1</a> </li> <li> <a href="#">Headline 2</a> </li> <li> <a href="#">Headline 3</a> </li> </ul> 

Thanks guys

Answer 1

JsFiddle example

CSS

 .headlines a{ font-size:36px; color:#999; transition: all 0.5s; } .headlines:hover a{ /* PARENT HOVER */ opacity:0.4; /* Dim all */ } .headlines a:hover{ /* SINGLE HOVER */ opacity: 1; /* Max one */ color:#0976ca; }