Question

i have a few li elements created like this:

echo '<ul>';
foreach ($test as $value){
echo '<li class="li_class">.$value['name'].</li>';
}
echo '</ul>';

this will give me:

<li class="li_class">name1</li>
<li class="li_class">name2</li>
<li class="li_class">name3</li>
...

what i want to do is when i hover over a li element all other li elements to fade out about 50%.

i could have 2 classes and use jquery to change them:

.li_class{
background: #ccc;
} 

.fade{
opacity: .5;
}

bur i don’t know how to tell jquery to add the .fade class to all other li but not the one i am hovering with the mouse.

any ideas? is there another way of doing this?

---

edit:

thanks to you all i came up with this:

$(document).ready( function () {   
    $('.li_class').hoverIntent(function(){
         $(this).removeClass('fade').siblings().animate({ opacity: 0.5 }, 500);
    },function(){
         $(this).siblings().andSelf().animate({ opacity: 1 }, 100);
    });
});

using the hoverIntent plugin.

Answer 1

Try this.

$('.li_class').hover(function(){
     $(this).removeClass('fade').siblings().addClass('fade');
},function(){
     $(this).siblings().andSelf().removeClass('fade');
})