1

有两个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

4

2 回答 2

3

嗯，试试这样的。

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();    
});

小提琴

或者在您的特定情况下：

$(".the-dropdown, .menu-item").hover( function(){
        $(".the-dropdown").show();
    }, function(){
        $(".the-dropdown").hide();
});
于 2013-09-18T21:51:59.560 回答
1

hoverIntent 是一个试图确定用户意图的插件......就像一个水晶球，只有鼠标移动！它类似于 jQuery 的悬停方法。然而，hoverIntent 不是立即调用 handlerIn 函数，而是等到用户的鼠标速度足够慢后再进行调用。

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

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

使用 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;
}
于 2013-09-18T23:16:26.137 回答