Containing div loses focus when mousing over selec

问题:

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();
  }
);

回答1:

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/

回答2:

You could use a timeout to prevent the hide action. Something like:

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