鼠标离开下拉不工作 IE答案

【问题标题】：Mouse leave on drop down is not working IE鼠标离开下拉不工作 IE
【发布时间】：2012-01-24 12:55:08
【问题描述】：

下面的 html 代码生成一个红色的 div，其中有一个 select 元素。使用 div，附加 mouseenter 和 mouseleave 事件，即当鼠标指针悬停在 div 上时，div 背景颜色变为黄色，当离开 div 时，它又变回红色。

在 mozilla 中，当鼠标指针进入 div 时，它会变成黄色。当我选择下拉选项值时，它也保持黄色，但这在 IE 中没有发生。当我选择第一个选项时，div 背景变成红色，这不应该发生。请帮我看看这个例子。

<html>
<head>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
  $("#selectDiv").mouseenter(function(){
        $("#selectDiv").css("background-color","yellow");
}).mouseleave(function(){
        $("#selectDiv").css("background-color","red");
});
});
</script>
</head>
<body>
<div id="selectDiv" style="margin:20px; background-color:red;height:100px;width:100px;">
<select style="margin:10px;">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
</div>
</div>
</body>
</html>

【问题讨论】：

行为在哪个版本的 IE 中被破坏？
我认为这里有类似的东西：stackoverflow.com/questions/2278514/…
在jsfiddle.net/3GhT2创建了一个jsfiddle
stackoverflow.com/q/2064011/482063

标签： jquery-ui jquery

【解决方案1】：

@AngelWorkz 干得好。在大多数版本的 ie 中，选择框有点棘手。点击它会正确（考虑到它呈现选择框的方式）触发 mouseleave / mouseout。

我的建议是使用计时器.. 做类似的事情

http://jsfiddle.net/3GhT2/1/

$(function(){

  var graceTimer = null;

  $("#selectDiv").mouseover(function(){
        clearTimeout(graceTimer);
        $("#selectDiv").css("background-color","yellow");
    }).mouseout(function(){
      graceTimer = setTimeout(function(){
        $("#selectDiv").css("background-color","red");
      }, 500);
    });
});

【讨论】：

我觉得很高兴有你的代码在这里，我在我的项目中使用了这个代码，它工作得很好，谢谢 SkippyChalmers。