包含div在选择下拉菜单时会失去焦点 [英] Containing div loses focus when mousing over select dropdown

问题描述

我有一个div，当你将鼠标悬停在它的容器上时，div被绝对定位，所以它出现在它的容器之外。它有多个选择下拉列表，当我尝试改变它们中的任何一个的值时，焦点就会丢失，它将在容器上触发一个鼠标移动。

已经在这里设置了这个问题的一个工作示例：

http://jsfiddle.net / uBjR3 / 2 /

这个问题发生在FireFox和IE浏览器（Chrome似乎正常工作）。

=====

HTML：

 < div class =container> 
< div class =dropdown> 
< select> 
< option> option 1< / option> 
< option> option 2< / option> 
< option> option 3< / option> 
< option> option 4< / option> 
< / select> 
< / div> 
< / div> 
  

CSS：

  .container {background-color：red; height：30px;宽度：60px; padding：20px;位置：相对; } 
 
 .dropdown {background-color：blue;身高：300px;宽度：200px; padding：20px;位置：绝对;顶部：70px; left：0px;显示：无} 
  

JQuery：

 （$。$ container）'。hover（
 function（）{
 $（'。dropdown'）。show（）; 
}，
 function（）{
 $（'。dropdown'）。hide（）; 
} 
）; 
  

解决方案

我刚看了一下你的代码。用这个替换你的jQuery，它会像你想的那样工作

$ $ $ $ $ $ $ $ $ $ $（document）.ready（function（）{
$ b $（'。container'）。hover（function（）{
$（'。dropdown'）。stop（1）.slideDown（）;
}，function（）{ （1）.slideUp（）;
}）;

}）;
$（。dropdown

这里是工作演示 http://jsfiddle.net/kevinPHPkevin/uBjR3/11/

I have a div that appears when you hover over its container and the div is positioned absolutely, so that it appears outside of its container. It has multiple select dropdowns within it, and when I try to change the value of any of them, the focus is lost it triggers a mouseout on the container.

I've set up a working example of this issue here:
http://jsfiddle.net/uBjR3/2/

This issue is occurring in FireFox and IE (Chrome seems to work fine).

=====

HTML:

<div class="container">
    <div class="dropdown">
        <select>
            <option>option 1</option>
            <option>option 2</option>
            <option>option 3</option>
            <option>option 4</option>
        </select>
    </div>
</div>

CSS:

.container { background-color: red; height: 30px; width: 60px; padding: 20px; position: relative; }

.dropdown { background-color: blue; height: 300px; width: 200px; padding: 20px; position: absolute; top: 70px; left: 0px; display: none; }

JQuery:

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

解决方案

I just had a look at your code. Replace your jQuery with this and it will work as you wish

$(document).ready(function(){

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

});

here's the working demo http://jsfiddle.net/kevinPHPkevin/uBjR3/11/

这篇关于包含div在选择下拉菜单时会失去焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！