There are multiple li elements created in this way:
echo '<ul>';
foreach ($test as $value){
echo '<li class="li_class">.$value['name'].</li>';
}
echo '</ul>';
This code will generate the following output:
<li class="li_class">name1</li>
<li class="li_class">name2</li>
<li class="li_class">name3</li>
...
The goal is to make all other li elements fade out by 50% when hovering over one li element.
One approach could be using two classes and utilizing jQuery to toggle between them:
.li_class{
background: #ccc;
}
.fade{
opacity: .5;
}
However, the challenge lies in telling jQuery to add the .fade class to all sibling li elements except for the one being hovered on. Any suggestions or alternative methods?
edit:
Thanks to everyone's input, I was able to come up with the following solution:
$(document).ready( function () {
$('.li_class').hoverIntent(function(){
$(this).removeClass('fade').siblings().animate({ opacity: 0.5 }, 500);
},function(){
$(this).siblings().andSelf().animate({ opacity: 1 }, 100);
});
});
This implementation involves using the hoverIntent plugin.