Jquery 将鼠标悬停在“选择”下拉列表上时，包含div将失去焦点

我有一个div，当您将鼠标悬停在它的容器上时会出现，并且div是绝对定位的，因此它会出现在它的容器之外。它有多个选择下拉列表，当我尝试更改其中任何一个的值时，焦点丢失，它会触发容器上的鼠标移出

我在这里为这个问题建立了一个工作示例：

这个问题发生在FireFox和IE中（Chrome似乎工作正常）

=====

HTML:

JQuery：

$('.container').hover(
  function () {
    $('.dropdown').show();
  },
  function () {
    $('.dropdown').hide();
  }
);

---

我刚看过你的密码。用这个替换jQuery，它将按照您的意愿工作

$(document).ready(function(){

      $('.container').hover(function(){
      $('.dropdown').stop(1).slideDown();
   },function(){
      $(".dropdown").stop(1).slideUp();
   }); 

});

---

这是正在运行的演示

您可以使用超时来防止隐藏操作。比如：

var timer;
$('PARENT')
    .on(
        mouseenter: function() {
            clearTimeout(timer);
            $('.dropdown').show();
        },
        mouseleave: function() {
            timer = setTimeout(function() {
                $('.dropdown').hide();
            }, 400);
        }, '.container')
    .on(
        mouseenter: function() {
            clearTimeout(timer);
        },
        mouseleave: function() {
            timer = setTimeout(function() {
                $('.dropdown').hide();
            }, 400);
        }, '.dropdown');

---

我想说，对于这个用例来说，这比我的解决方案更方便：）所以这看起来是可行的-谢谢！我刚刚实现并发布的另一个解决方案是，根本不使用jquery，而是用css控制.dropdown div的显示/隐藏（我不知道为什么我花了这么长时间才弄明白）。实际上，这个解决方案在IE9中并不起作用。它确实解决了Firefox中的问题，但有一个选项是在其周围添加一个“if”语句，并将其应用于Firefox Only链接相关帖子：

$(document).ready(function(){

      $('.container').hover(function(){
      $('.dropdown').stop(1).slideDown();
   },function(){
      $(".dropdown").stop(1).slideUp();
   }); 

});

var timer;
$('PARENT')
    .on(
        mouseenter: function() {
            clearTimeout(timer);
            $('.dropdown').show();
        },
        mouseleave: function() {
            timer = setTimeout(function() {
                $('.dropdown').hide();
            }, 400);
        }, '.container')
    .on(
        mouseenter: function() {
            clearTimeout(timer);
        },
        mouseleave: function() {
            timer = setTimeout(function() {
                $('.dropdown').hide();
            }, 400);
        }, '.dropdown');