Blur Menu Items

by Joe Saad

HTML

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

CSS

body {
    background-color: #000;
    color: #fff;
}
a {
    color: #fff;
}
ul {
    list-style-type:none;
}
li {
    display: inline-block;
    width: 100px;
    border:1px solid red;
}
li a {
    width: 100%;
    display: block;
}

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(255,255,255,0.5);
    -webkit-transition: text-shadow 2s, color 2s; /* Safari */
    transition: text-shadow 2s, color 2s;
}

JavaScript

$('li a').hover(function(){
    $('li a').not(this).each(function(){
        $(this).addClass('blurry-text');
    });     

},function(){
    $('li a').each(function(){
        $(this).removeClass('blurry-text');
    });                     
                
});