0

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

http://jsfiddle.net/S44fM/

<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>
4

1 回答 1

0

发生这种行为是因为，当您向左移动时，触发的第一个事件是 #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/

于 2013-10-23T11:45:00.787 回答