マウスのドロップダウンが機能していない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

ような何か？ – jsalonen

私は似たようなものがここにあると思います：http://stackoverflow.com/questions/2278514/jquery-events-mouseenter-mousemove-behaviour-in-ie – SpaceBison

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

@AngelWorkz素敵な仕事。選択ボックスは、ほとんどのバージョンでは少し複雑です。それをクリックすると、（選択ボックスをレンダリングする方法を考慮して）mouseleave/mouseoutがトリガーされます。

私のアドバイスは、タイマーを使用することです。..振る舞いが壊れているIEのバージョンで

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

答えて

関連する問題