いくつかの情報を表示する必要があるマウスオーバーの画像のリストがあります。問題は、情報 div に対してマウス イベントがトリガーされないことです。
#team_div{
display:block;
position:relative;
}
#pop_div{
width:300px;
padding:5px;
height:200px;
overflow:hidden;
border:2px solid #ccc;
background:#fefefe;
position:absolute;
display:none;
}
#pop_div img{
margin:10px;
display:block;
float:left;
}
.
<div id="team_div" class="team_div_loading">
<div id="pop_div"></div>
<table>
list of images
</table>
</div>
.
$('#team_div > table img').hover(function() {
var top = this.parentNode.offsetTop;
var left = this.parentNode.offsetLeft;
var img =$(this).attr('src');
var id =$(this).attr('id');
var content = $("#" + id + "p").html();
$("#pop_div").show();
$("#pop_div").css('top', top-11 +'px');
$("#pop_div").css('left', left-12 +'px');
$("#pop_div").html('<img src="' + img + '"/>' + content );
$("#pop_div").fadeIn(700);
});
$("#pop_div").mouseout(function(){
$("this").hide();
});
この場合、ホバー時に画像に対して関数が呼び出されますが、pop_div に対してトリガーされるマウス イベントはありません。
あなたの提案に感謝します。