1

我正在尝试在 div 中添加多个输入元素和其他数据，并为该 div 使用溢出：自动（使用 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文档，您会注意到这一行。

mouseout当指针移出子元素时mouseleave触发，而仅当指针移出绑定元素时触发。

基本上，只要您将鼠标悬停在子元素上，IE 就会决定重置可见性，从而重置外部 div 的可见性。其他浏览器似乎足够聪明，如果它已经可见，它们就不会触摸它。

于 2013-06-11T16:19:21.337 回答