Question

有两个div; Div A（默认为display:none）和Div B（始终可见）。如果鼠标在Div B上移动，Div A变得可见，那怎么会这样做呢？如果鼠标光标位于Div A或Div B上，则Div A应保持可见，否则应隐藏Div A.

我正在使用jQuery插件hoverIntent。

$(".the-dropdown").hoverIntent( function(){
        $(".the-dropdown").show();
    }, function(){
        $(".the-dropdown").hide();
});

$(".menu-item").hoverIntent( function(){
    $(".the-dropdown").show();
}, function(){
    $(".the-dropdown").hide();
});

jsfiddle

Answer 1

嗯，试试这样的事。

HTML：

<div id="a"></div>
<div id="b"></div>

CSS：

div {
    height: 200px;
    width: 200px;
}
#a {
    background: #0f0;
    display: none;
}
#b {
    background: #f0f;
}

JS：

$('#a, #b').hover(function() {
    $('#a').show(); 
}, function() {
    $('#a').hide();    
});

Fiddle

或者在您的具体案例中：

$(".the-dropdown, .menu-item").hover( function(){
        $(".the-dropdown").show();
    }, function(){
        $(".the-dropdown").hide();
});

Answer 2

hoverIntent是一个试图确定用户的插件   意图......就像一个水晶球，只有鼠标移动！它很相似   到jQuery的悬停方法。但是，而不是调用handlerIn   立即执行功能，hoverIntent等待用户的鼠标减速   在打电话之前已经足够了。

为什么呢？延迟或防止意外发射动画或ajax   调用。简单的超时适用于小区域，但如果您的目标区域   它很大，无论意图如何都可以执行。这就是hoverIntent的地方   进来......

如果您想使用hoverIntent插件，可以在此处下载：
http://cherne.net/brian/resources/jquery.hoverIntent.html

<强> Working Example Using hoverIntent

$(".menu-item").hoverIntent({
    over: function () {
        $(".the-dropdown").slideDown();
    },
    out: function () {
        $(".the-dropdown").slideUp();
    },
    timeout: 500,
    interval: 500
});

<div class="menu-item">Hover this for half a second
    <div class="the-dropdown"></div>
</div>

div {
    height: 200px;
    width: 200px;
}
.the-dropdown {
    background: red;
    display: none;
    position:relative;
    top:182px;
}
.menu-item {
    background: blue;
}

如果鼠标位于第一个或第二个div上，则保持第二个div可见

2 个答案: