jQuery:mouseenter、mouseover、mouseleave、mouseout on select

我有这样一个选择框：

<select id="se">
   <option>An option</option>
   <option>Another option</option>
</select>

第一步很好。当我进入选择框时，将显示文本。当我现在点击选择框来选择一个选项时，“mouseout”事件将在我将鼠标放在一个选项上时触发-但是选项元素在选择元素中。。。我不知道为什么，但jQuery似乎认为我已经脱离了选择框

在不改变HTML代码的情况下，有什么解决方案吗

---

编辑：我尝试了mouseenter、mouseover、mouseout、mouseleave…

使用变量

isFocus

JavaScript/Jquery：

var isFocus = false;
jQuery('#se').mouseover(function(){
   someThing.show();
}).mouseout(function(){
    if(!isFocus)
    {
       someThing.hide();
    }
}).focus(function(){
    isFocus = true;
}).blur(function(){
    someThing.hide();
    isFocus = false;
});

试试这个：

var $someThing = $('#something')
var stop;

jQuery('#se').hover(function(){
    $someThing.stop().fadeIn();
    clearTimeout(stop)
}, function(){
     stop = setTimeout(function(){
          $someThing.stop().fadeOut();
     }, 2000)
});

---

如果您想要一个纯JS解决方案，真正保持鼠标悬停事件在选项上触发的最简单方法是按照Allen的建议用

包装它

我只需快速浏览一下你所有的

，然后在它们周围自动添加一个div。然后设置一个实时mouseover/mouseout事件，如下所示：

$（'select'）。换行（“”）；
$（文档）.on（'mouseover'，'.sewraper'，函数（e）{
console.log（'mouseIN'）；
});
$（文档）.on（'mouseout'，'.sewraper'，函数（e）{
console.log（'mouseOUT'）；
});​

单击，解除鼠标移出事件的绑定，鼠标越过，绑定鼠标移出事件。

我使用计时器防止触发鼠标移出事件。它工作得很好

var timeoutOver;

$("#btn").mouseenter(function () {

    clearInterval(timeoutOver);
    //over event

}).mouseleave(function () {

    timeoutOverPeriod = setTimeout(function() {
            //out event
            $("my-select").blur();
    }, 500);

});

---

这是正确的行为。当你点击一个元素，列表消失时，你不再在列表上方。正如@insertusernamehere提到的，这是正确的行为。到底应该发生什么？选择后，“omething”是否应该停留更长的时间而不是隐藏？我认为问题在于将光标从选择框移动到选项列表会导致红色元素被隐藏。是的。这将是工作-但我需要改变的HTML。这是一个解决方案，但不是唯一的js解决方案。但是谢谢。这是如何改变行为的？

$('select').wrap('<div class="seWrapper" />');

$(document).on('mouseover', '.seWrapper', function (e) {
        console.log('mouseIN');
});

$(document).on('mouseout', '.seWrapper', function (e) {
        console.log('mouseOUT');
});​

var timeoutOver;

$("#btn").mouseenter(function () {

    clearInterval(timeoutOver);
    //over event

}).mouseleave(function () {

    timeoutOverPeriod = setTimeout(function() {
            //out event
            $("my-select").blur();
    }, 500);

});