1

div内に複数の入力要素と他のデータを追加しようとしており、そのdivにoverflow:autoを使用しています(jqueryを使用してそのdivを表示/非表示にします)

Firefox ブラウザでは問題なく動作しますが、IE (10) では、要素がその div の高さを超えるとスクロール バーが表示されますが、ユーザーがスクロール バーを使用して下にスクロールし、マウスを任意の場所に移動すると、入力要素またはその div 内の他の要素を使用してデータを入力すると、div のコンテンツが上にスクロールして戻ります。そのため、ユーザーはそのdivの高さより下にあるそのdivの要素/コンテンツにアクセスできません

コードを見ることができるフィドルのリンクは次のとおりです http://jsfiddle.net/euMJn/1/

その html ページのコード (jsfiddle リンクでコードが必要なため)

どんな助けや指示もいただければ幸いです

助けてくれてありがとう

----コードは以下から始まります----

<html>
<head>
<title>Div Scroll</title>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css"
        type="text/css" rel="Stylesheet" />

<style>
#outer{
    width:400px;
    height:400px;
    position:absolute;
    left:30px;
    top:30px;
    border-style:solid;
    border-width:1px;
    z-index: 1;
    display:none;
    overflow: auto;

}

#inner{
    width:300px;
    height:300px;
    position:relative;
    left:20px;
    top:20px;
    overflow: auto;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script >
 $(document).ready(function(){  


    $('#trigger').mouseover(function(e){                
        $('#outer').show();                                    
    }); 

    $('#trigger').mouseout(function(){
        $('#outer').hide();
    });

    $('#outer').mouseover(function(){
        $('#outer').show();         
    }); 

    $('#outer').mouseout(function(){
        $('#outer').hide();
    }); 

});     
</script>

</head>


<body>
<button id='trigger' style="background-color:yellow"> Mouse over here</button>
<br/><br/>
<div id="outer"> 
    <div id="inner"> 
        <p>Text above input01</p>
        <label for='input01'>Input 1: </label> <input name='input01' id='inp01' type='text' size='25' value='input' >
        <br>
        <p>Text above input02</p>       
        <label for='input02'>Input 2: </label> <input name='input02' id='inp02' type='text' size='25' value='input' >
        <br>
        <p>Text above input03</p>       
        <label for='input03'>Input 3: </label> <input name='input03' id='inp03' type='text' size='25' value='input' >
        <br>
        <p>Text above input04</p>       
        <label for='input04'>Input 4: </label> <input name='input04' id='inp04' type='text' size='25' value='input' >
        <br>
        <p>Text above input05</p>       
        <label for='input05'>Input 5: </label> <input name='input05' id='inp05' type='text' size='25' value='input' >
        <br>
        <p>Text above input06</p>       
        <label for='input06'>Input 6: </label> <input name='input06' id='inp06' type='text' size='25' value='input' >
        <p>Text above input07</p>       
        <label for='input07'>Input 7: </label> <input name='input06' id='inp07' type='text' size='25' value='input' >
        <p>Text above input08</p>       
        <label for='input08'>Input 8: </label> <input name='input06' id='inp08' type='text' size='25' value='input' >
        <p>Text above input09</p>       
        <label for='input09'>Input 9: </label> <input name='input06' id='inp09' type='text' size='25' value='input' >
        <p>Text above input10</p>       
        <label for='input10'>Input 10: </label> <input name='input06' id='inp10' type='text' size='25' value='input' >      
    </div>
</div>
</body>
</html>
4

1 に答える 1

4

を使用する代わりに、 をmouseout使用してmouseleaveください。

$('#outer').mouseleave(function () {
    $(this).hide();
});

ここに新しいフィドル。

jQuery.mouseleave docs を見ると、この行に気付くでしょう。

mouseoutポインターが子要素の外に移動したときにもmouseleave発生しますが、ポインターがバインドされた要素の外に移動したときにのみ発生します。

基本的に、IE は、子要素にカーソルを合わせるたびに可視性をリセットすることを決定し、外側の div の可視性をリセットします。他のブラウザは、すでに表示されている場合は触れないほど賢いようです。

于 2013-06-11T16:19:21.337 に答える