当悬停在选择框上时，jquery悬停功能失灵

我的要求是，当我将鼠标悬停在弹出框上并选择表单上的某个内容时，弹出窗口应该保持可见。当悬停在选择框上时，jquery悬停功能失灵

如果弹出失去移动悬停，它应该被隐藏

一切与下面的代码运行良好。但是，当我尝试在选择框（选项下拉弹出）中选择选项时，弹出隐藏。

这里是的jsfiddle链接http://jsfiddle.net/LNGz6/5/只有在Internet Explorer中会出现此问题

下面是代码

<div id="popup"> 
<div class="label"> Search </div> 
    <div class="control"> 
     <select name="searchval"> 
     <option value="entries">Entries</option> 
     <option value="bookings1">bookings1</option> 
     <option value="bookings2">bookings2</option> 
     <option value="bookings3">bookings3</option> 
     <option value="bookings4">bookings4</option> 
     <option value="bookings5">bookings5</option> 
     <option value="bookings6">bookings6</option> 
     </select> 
    </div> 
</div>

jQuery函数

$("#popup").hover(function(){ 
    //do none 
},function(){ 
    $(this).hide(); 
});

来源

2012-08-10 Rajasekar

也许这个问题将帮助：http://stackoverflow.com/questions/149573/check-if-option-is-selected-with-jquery-if-not-select-a-default – 2012-08-10 11:24:16

我WOU LD做，是检查阉羊焦点位于所述输入元件或不：

$("#popup").hover(function() { 
    //do none 
}, function() { 
    var $sel = $('select'); 
    if ($sel.is(":focus")) { 
     console.log('do not hide'); 
     $sel.blur(); 
    } else { 
     $(this).hide(); 
    } 
});

例here。

选择任何选项后弹出窗口不会隐藏。选择元素上的blur方法是必要的，因为在选择该选项后，焦点将保留在其上，并且如果您悬停并再次离开盒子，则弹出窗口不会隐藏，以防您没有点击/聚焦之前的任何其他元素。当你选择的是弹出框内的选项时，问题就出现了。重点将保留在选择，你必须点击其他地方，这是我现在有：\

最后，选择元素的方式是不是最佳的。在这种情况下，它会起作用，但是如果你的html中有其他select元素，就会有冲突。因此，向标签添加一个id或class，并修改选择器以确保它只会影响该元素。

来源

2012-08-10 11:52:29 davids

您会遇到此行为，因为事件冒泡DOM树并触发潜在的父事件处理程序。你有两个选择来解决这个问题：

1）在select元素添加一个事件处理程序和停止事件冒泡：

$("select[name=searchval]").hover(function(e){ 
    e.stopPropagation(); 
});

2）检查事件的目标，并防止因此躲在：

$("#popup").hover(function(){ 
    //do none 
},function(e){ 
    if (e.target == this){ 
     $(this).hide(); 
    } 
});

Example对于后者 - 隐藏触发器只在红色部分 - 其中div不与子元素重叠。

来源

2012-08-10 12:08:16 Christoph

当悬停在选择框上时，jquery悬停功能失灵

回答

相关问题