Question

I am using this HTML:

<div class="menu">
    <ul>
        <li><a href="#" name="div1" >Home</a></li>
        <li><a href="#" name="div2" >Page1</a></li>
        <li><a href="#" name="div3" >page2</a></li>
        <li><a href="#" name="div4" >page3</a></li>
    </ul>
</div>

<div>

    <div class="div1" style="display:none">
        Test
    </div>

    <div class="div2" style="display:none">
        Test...
    </div>

    <div class="div3" style="display:none">
        Test 1
    </div>

    <div class="div4" style="display:none">
        Test 2
    </div>

</div>

Along with the following jQuery:

$('a').mouseover

(function() {
    var divname = this.name;
    $("." + divname).show("slow");
});

JsFiddle

I want to be able to mouseout and hide once I leave the boxes that appear not on “a”. How do I do this?

Answer 1

Wow Im sorry I didnt understand the question initially I guess, see below. This binds mouseout to the div you just showed, so it will stay until you move out of it, not the a.

Live Demo

$('a').mouseover(function() {
    var divname = this.name;
    $("." + divname).show("slow").mouseout(function(){$(this).hide('slow')});
});

I would recommend changing your markup however to have the div’s as children of the li’s, or at the very least, putting them closer to the a’s once hovered over because if you notice you can hover over all of the a elements but never mouseout of the div causing them to stay. Then you could do something like the following:

$('li').hover(function() {
    var divname = this.name;
    $("." + divname).show("slow");
},function(){
    var divname = this.name;
    $("." + divname).hide("slow");
});