Question

下面的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>

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

鼠标离开下拉不工作IE

1 个答案: