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

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的onmouseout试图将其消失。 但是，在消失之前，您已经移至#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 个解决方案

解决方案1
0 已采纳 2013-10-23 11:45:00

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-10-23 11:45:00

解决方案1
0 已采纳 2013-10-23 11:45:00