如何从 jquery 中的 2 个 div 中隐藏 mouseleave 上的 div？

Posted 2023-05-09

【中文标题】如何从 jquery 中的 2 个 div 中隐藏 mouseleave 上的 div？

【英文标题】：how to hide a div on mouseleave from 2 divs in jquery?

【发布时间】：2012-06-03 23:13:00

【问题描述】：

这个问题可能有点牵强，但换句话说我有一个菜单（见jsfiddle）

当我将鼠标悬停在一个 div 上时，我会得到一个下拉菜单。当我鼠标离开时，下拉菜单消失。到目前为止一切顺利。

问题是如果鼠标也悬停在下拉菜单上，我希望菜单保持打开状态。

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');
    );

如果有人可以重新提出我的问题来说出我的意思，请这样做。

谢谢

【参考方案1】：

您不需要 javascript 来执行此操作：CSS solution。

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

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

【讨论】：

CSS3 过渡（谷歌搜索有效）会让它看起来很流畅

+1，但请在此处添加您的 css 解决方案，不要让您的答案因链接而死。

【参考方案2】：

试试这个。

为 nextElem 添加了鼠标悬停事件。还清理了变量更高效，而不是引用$elem.Next()，只需设置

var nextElem = $elem.Next()

并添加了这个

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

);

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