JQuery Hover Effect With Child LI Elements

Question

I'm very new to JavaScript let alone JQuery, Although I've been picking it up slowly I have come across a problem with a hover effect. I'm am using a plugin called lavalamp and its been giving me problems for a while regarding a multi-dimensional menu. I have tried .noLava without success so I decided to try and hide the tracking LI element once the sub UL layer was hovered (because the moment a dub layer was hovered the tracking LI would follow in unnatural places).

$(" #top_menu ul li ul").hover(function(){
        $('li.backLava').hide(300) 
    },
    function(){
        $('li.backLava').show(100) 
    }
);

This code works once I hover the sub menus, yet the problems is that when i goto another sub menu then back to the first sub menu, the tracking LI will show again. also when i hover out the sub menu to the page, it sometimes wont show back. Although trying to do this menu has been a good experience while gaining skills in JS and JQuery. Its now starting to become beyond a joke, I have skills in PHP, CSS, HTML, C# etc. Yet JS just doesn't seem like it does whats being asked sometimes..

So any help will greatly be appreciated thanks.

Answer 1

The problem you're seeing resides in the JQuery selector you're using in your hover functions. When you use "li.backLava" on the "unhover" function, you're telling any list item elements with the class "backLava" to show again, which is why the tracking LI appears again when a sub-menu hides.

To get it to work as you want, we just need to refine your code to hide only the parent tracking LI element. So instead of just using "li.backLava", use something that's a bit more specific:

$("#top_menu ul li ul").hover(
    function(){

        //Find this sub-menu's parent list, and hide the tracking LI.
        $($(this).parents("ul")[0]).children("li.backLava").hide();
    },
    function(){

        //Find this sub-menu's parent list, and show the tracking LI again.
        $($(this).parents("ul")[0]).children("li.backLava").show();
    }
);

NOTE: This code isn't tested, but it should work, or work with some minor adjustment.

EDIT I've updated the code now that I've seen your demo and what you want. The updated code should do what you want.