Question

I have a php page displaying query results from mysql. This result is displayed in an unordered list <li>. I have also a div, initially hidden inside of each <li> tag, that should showup on hover. I have tried this using jquery with this:

$('#results li').mouseover(function() { 
   $('.theoption').show();
}).mouseleave(function() {$('.theoption').hide()});

This displays the hidden div. The problem is it displays on all <li> tags at the same time. How can I change the code so that the div only displays on the currently hovered <li>?

many thanks.

Answer 1

If the div is inside the li tag you can use plain ol’ css:

#results li:hover div.theoption {
     display: block;
}

Or in jQuery:

$('#results li').hover(function(){
     $('.theoption', this).show();  //find the div INSIDE this li
},function(){
     $('.theoption', this).hide();
});