Kyle.Belanger Kyle.Belanger - 11 months ago 45
jQuery Question

jQuery - Display an element on hover of another

This could be done easily in CSS if the element that needs to be displayed was a child of the hover, but it isn't; it's in a different section of the document.

I'm trying to have the menu display upon hovering over the '[ + ]' element.

Live: http://blnr.org/testing

Jfiddle: http://jsfiddle.net/bUqKq/5/

jQuery:

$(document).ready(function(){
$("header[role='masthead'] #container #left nav#static span").hover(
function(){$("header[role='masthead'] nav#active").show();},
);
});

Answer Source

You can drastically simplify this by just only showing the id's you are interested in. No need for the rest of the selectors that you are using as ID's are required to be unique. Note I also provided both hover-in and hover-out functions as I am assuming you want to hide the element after hover condition ends.

    $(document).ready(function(){
        $("#static span").hover(
            function(){
                $("#active").show();
            },
            function(){
                $("#active").hide();
            }
        );
    });

Alternately you could just us single closure with toggle() like this:

    $(document).ready(function(){
        $("#static span").hover(
            function(){
                $("#active").toggle();
            }
        );
    });