Содержит div теряет фокус, когда мышь над выпадающим списком выбора

Question

У меня есть 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; 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(); 
    } 
); 

Answer 1

Я просто взглянули на свой код. Заменить JQuery с этим, и он будет работать, как вы хотите

$(document).ready(function(){ 

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

}); 

Вот рабочий пример http://jsfiddle.net/kevinPHPkevin/uBjR3/11/

Answer 2

Вы можете использовать тайм-аут, чтобы предотвратить скрыть действия. Что-то вроде:

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');