Question

当对象位于另一个元素上方时，我似乎遇到onmouseout没有触发的问题。在我的示例中，向右移动到顶部或底部会立即触发mouseout事件，但是向左移动它不会触发。

<html>
<head>
<script  type="text/javascript">

var viewedCont;

function view_img(){
viewedCont = document.getElementById('view-container');
viewedCont.style.display='block';
}


function view_img_stop(){
viewedCont.style.display='none';

}

</script>

<style>
$css_inPage

#roll{
z-index:100;
background-color:#0000CC;
height:400px;
width:200px;
}

#view-container{
display:none;
width:355px;
height:402px;
z-index:9999;
position:absolute;
overflow:hidden;
background-color:#CCCCCC;

margin-left:230px;
margin-bottom:90px;
}



</style>
</head>
<body>

<div id="view-container" onmouseout="view_img_stop()">
</div>


<div  style="margin-left:200px">
<div  id="roll"  onmouseover="view_img();"></div>
</div>

</body>
</html>

Answer 1

出现这种情况是因为，当你向左移动时，第一个触发的事件是＃view-container上的事件，试图让它消失。然而，在它消失之前，你已经在#roll的一小部分已经移动了，#roll的事件onmouseover也会在上一个事件之后触发，并且再次显示#view-container。所以你基本上需要处理#roll的onmouseout事件，或者让#view-container覆盖#roll的整个部分。

因此，我认为可以按照您的意愿修改它，

<body>

<div id="view-container" onmouseout="view_img_stop()" onmouseover="view_img();">
</div>


<div  style="margin-left:200px">
<div  id="roll"  onmouseover="view_img();" onmouseout="view_img_stop()"></div>
</div>

</body>

http://jsfiddle.net/S44fM/2/

Javascript - 使用z-index时onmouseout不会触发

1 个答案: