how to hide a div on mouseleave from 2 divs in jqu

Question

the question might be a bit wired but in other words i have a menu (see jsfiddle)

when i hover over a div i get a drop down. when i mouseleave the drop down disappear. so far so good.

the problem is that i want the menu to stay open if the mouse is hovering over the drop down also.

ex: if($elem).not(":hover"){..}

some code:

<div class="top_menu_item">
    <div class="hover_item">
        <a href="#">TEST</a>
    </div>
    <div class="drop_item" style="display: none;">
        <div>
            <a href="#">My test</a>
        </div>
        <div class="">
            <a href="#">Add test</a>
        </div>
        <div>
            <a href="#">Remove test</a>
        </div>
    </div>

$(document).ready(function () {
    var elem = new Array();
    var len = $(".hover_item").length;
    var i = 0;
    while (i < len) {
        elem[i] = $(".hover_item:eq(" + i + ")");

        i = i + 1;
    }
    $.each(elem, function (key, val) {
        hoverFunc(val);
    });

});

function hoverFunc($elem) {

    $elem.hover(function () {
        if ($elem.next().is(":hidden")) {
            $elem.next().slideDown("fast");
        }
    });

    $elem.mouseleave(function (e) {
        // here should be :  if the mouse is not hovering over the dropdown, then
        $elem.next().slideUp("fast");
    });

    $elem.next().mouseleave(function (e) {
        $elem.next().slideUp('fast');
    });
}

if someone can re-Fraze my question to say what i mean please do so.

thanks

Answer 1

Try this out.

Added mouse hover events for the nextElem. Also cleaned up the variables to be more efficient, instead of referencing the $elem.Next(), just set

var nextElem = $elem.Next()

and added this

  nextElem.hover(function () {
    if ($elem.is(":hidden")) {
        $elem.slideDown("fast");
    }

});

http://jsfiddle.net/fmTnh/3/

Answer 2

You don't need javascript to do that: CSS solution.

Just add the submenu (.drop_item) as a child element to the trigger element (.hover_item) and add some CSS:

.drop_item { display: none; }
.hover_item:hover .drop_item { display: block; }​