通过触发器打开一个 div，只要鼠标位于打开的 div 中，就将其保持打开状态

Question

一个简单的 jQuery 问题 有一个触发器，可以打开一个div，现在我希望只要鼠标位于div中，div就保持打开状态。

例如。 (trigger)->open(box)->只要鼠标在框中，就保持框打开。

如何做到这一点？

http://jsfiddle.net/Gq2LX/

Answer 1

问题是你的悬停正在触发 div 上。
如果你离开触发器 div，你的 mouseOut 函数就会被调用。

稍微改变一下你的 DOM，然后将框放在触发器内即可使其工作。

html:

<div id="trigger">
  <span>This is a trigger</span>
  <div id="box"></div>
</div>

script:

$('#trigger').hover(function() {
    $('#box').show();
}, function() {
    $('#box').hide();
});

css:

#box {width:350px;height:400px;border:1px solid #000;display:none;}
#trigger {width:350px;}

我更改了 #trigger 元素的宽度（默认情况下 div 元素占 100%）
我更改了标记（在触发器内添加框。

工作示例：

http://jsfiddle.net/Gq2LX/2 /

Answer 2

或类似的：

$('#trigger').mousenter(function() {
    $('#box').show();
});

$('#box').mouseleave(function() {
    $(this).hide();
});

http://jsfiddle.net/Gq2LX/6/