javascript - 如果鼠标悬停在第一个或第二个 div 上，则保持第二个 div 可见

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