Dim non-focused list items

by DannyEnglander

HTML

<div id="hl">
    <ul class="headlines">
        <li>
            <a href="#">Headline 1</a>
        </li>
        <li>
            <a href="#">Headline 2</a>
        </li>
        <li>
            <a href="#">Headline 3</a>
        </li>
        <li>
            <a href="#">Headline 4</a>
        </li>
        <li>
            <a href="#">Headline 5</a>
        </li>
        <li>
            <a href="#">Headline 6</a>
        </li>      
    </ul>
</div>

CSS

#hl{
background:#eee;
    padding:25px;
    width:200px;
}
a{text-decoration:none;}
.shadow{
    text-shadow: 0px 2px 2px #777;
    filter: dropshadow(color=#777, offx=0, offy=2); 
}

.headlines li a,.right-side .headlines li{font-size:36px;color:#999}
.headlines li a:hover{color:#0976ca}

JavaScript

$('ul.headlines li').hover(function() {
    $(this).addClass('shadow').siblings().stop().fadeTo(300, 0.4);
}, function() {
    $(this).removeClass('shadow').siblings().stop().fadeTo(300, 1);
});