jQuery hover event with nested elements

Question

I\'ve currently got your basic, run-of-the-mill menu tree as follows:

  

    home
    


        
                      

              相关标签:
       
      

Answer 1

You can actually do this without js although you would need the js for ie6.

something like this might work:

$(this).children('div').css("display", "block");

or even:

$(this).children('div').show();

Here 'this' is the li.

Answer 2

Try stopping event propagation in the hover function to prevent the event from bubbling up to the parent. You might also want to look at the hoverIntent plugin to solve issues of "flashing" hover effects if your "hovered" elements are close together.

$("#nav li").hover(
    function(e) {
            e.stopPropagation();
            $(".controls:first", this).css("display", "block");
        },
        function() {
            $(".controls:first", this).css("display", "none");
        }
);