Question

我该如何解决这个问题？我有div的形式，默认隐藏。它显示在点击事件上，我希望它在鼠标上隐藏 - 这很容易。

但是有一个问题，我正在使用jquery选择 - http://harvesthq.github.io/chosen/用于下拉菜单，它位于此div中，但是下拉列表比div更长。这意味着，当我选择一些选项时，鼠标指针位于div之外，带有mouseout事件，当我用鼠标移动时它会隐藏。

有什么建议吗？

谢谢。

jQuery很简单：

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

解决方案1：经过一小时的尝试和编码，我发现了一个简单的解决方在#header_form中创建div，绝对位置宽为#header_form，下拉菜单位于下拉菜单位置。绝对定位的div不会影响#header_form的背景颜色，但会创建不可见的“图层”，您可以使用#header_from的“外部”鼠标移动而不关闭它。将鼠标移动到原始#header_form时也需要删除此修复元素，这样当你再次移出时，div会隐藏。

在这里演示：http://jsfiddle.net/a5PuG/5/（只需将蓝色更改为透明）仍然需要进行一些调整：）

Answer 1

找到更好的方法后编辑我的答案。你可以相当容易地做到这一点。将您的代码更改为：

$('select').chosen();
var shouldHide;
$('#form').mouseleave(function() {
    if (shouldHide) $(this).hide();
})
.mouseover(function() {
    shouldHide = true;         
});
$('.chosen-container').mouseover(function() {
    shouldHide = false;
})
.mouseleave(function() {
    shouldHide = false;
});

jsFiddle

Jquery选择的时间长于显示div，mouseout事件关闭div

1 个答案: