JQuery Dim или изменить другие элементы списка при наведении

Question

Как я могу изменить цвет при наведении и одновременно приглушить остальное другим цветом и / или непрозрачностью.

Простые три элемента списка, заключенные в неупорядоченный список.

Эти элементы списка меняют цвет при наведении.

Код:

.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>

Спасибо, ребята

Answer 1

jsFiddle пример

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;
}