鼠標離開下拉不起作用IE

下面的html代碼會產生一個紅色的div，其中有一個select元素。使用div時，附加了mouseenter和mouseleave事件，即當鼠標指針懸停在div上時，div背景顏色變爲黃色，當離開div時，它會再次變回紅色。鼠標離開下拉不起作用IE

在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>

來源

2012-01-24 Ravichandra

在哪個版本的IE的行爲是壞了？ – jsalonen

我覺得類似的東西在這裏：http://stackoverflow.com/questions/2278514/jquery-events-mouseenter-mousemove-behaviour-in-ie – SpaceBison

在http://jsfiddle.net/3GhT2/ –

@AngelWorkz nice work。選擇框在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); 
    }); 
});

來源

2012-01-24 15:16:16

我覺得很高興有你的代碼在這裏，我在我的項目中使用這段代碼，它運行良好，謝謝SkippyChalmers。 – Ravichandra

@Ravichandra沒問題。這是一個棘手的情況，我知道！ –

鼠標離開下拉不起作用IE

回答

相關問題