如何从jquery中的2个div隐藏mouseleave上的一个div? [英] how to hide a div on mouseleave from 2 divs in jquery?

问题描述

这个问题可能有点有线，但是换句话说，我有一个菜单(请参阅 jsfiddle )

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

当我将鼠标悬停在div上时，我会掉下来.当我用鼠标离开时，下拉菜单消失了.到目前为止一切都很好.

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"){..}

一些代码:

<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.

谢谢

推荐答案

您无需使用JavaScript即可: CSS解决方案.

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

只需将子菜单(.drop_item)作为子元素添加到触发元素(.hover_item)并添加一些CSS:

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; }​

这篇关于如何从jquery中的2个div隐藏mouseleave上的一个div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！