Javascript-onmouseout在使用z-index時不會觸發

當物體位於另一個元素上方時，我似乎遇到了onmouseout無法觸發的問題。在我的示例中，移出到右上方或下方會立即觸發鼠標移出事件，但向左移動不會觸發。Javascript-onmouseout在使用z-index時不會觸發

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

來源

2013-10-23 user1209203

此行爲是因爲，當你移動到觸發該留下的第一個事件是的onmouseout＃查看容器試圖把它趕走的。但是，在它消失之前，您已經在#roll的一小部分移動了，並且#roll的事件onmouseover也在之前的事件之後觸發，並再次顯示＃view-container。所以你基本上需要處理#roll的onmouseout事件，或者讓＃view容器覆蓋#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-23 11:45:00 melc

Javascript-onmouseout在使用z-index時不會觸發

回答

相關問題