下面的 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>
最佳答案
@AngelWorkz 干得好。在大多数版本的 ie 中，选择框都有点棘手。单击它会正确地(考虑到它呈现选择框的方式)触发 mouseleave/mouseout。
我的建议是使用计时器..做类似的事情
$(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);
});
});
关于jquery-ui - 鼠标留在下拉菜单上不起作用 IE，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8987154/