jQuery - Display an element on hover of another

Question

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 1

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();
            }
        );
    });

Answer 2

Here is a simple example where you hover over one element and a completely different element is changed,

http://jsfiddle.net/bUqKq/6/

<div id="one">hover here</div>
<div id="two">hover here2</div>

 

$("#one").on("mouseover",function(){
    $("#two").css({
        color:"red"
    })
});

$("#one").on("mouseout",function(){
    $("#two").css({
        color:"black"
    })
});

$("#two").on("mouseover",function(){
    $("#one").css({
        color:"red"
    })
});


$("#two").on("mouseout",function(){
    $("#one").css({
        color:"black"
    })
});