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 に答える