絶対位置divのマウスイベントに問題があります

Question

私はmouseoverで画像のリストを持っているので、いくつかの情報を表示する必要があります。問題は、マウスイベントが情報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をトリガーするマウスイベントはありません。

ご意見ありがとうございます。

Answer 1

まず、あなたは私がやった、div要素またはそのためのULのli構造を使用して、要素に使用することはできませんという

$('#team_div>.imageDiv 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); 
    }); 

でjqueryの機能を

<div class="imageDiv"></div> 

でのimgタグを挿入して編集で

間違ったjqueryセレクタを使用していました。イメージホバー機能で何をしようとしているのか分かりませんが、上記の変更に取り組んでいます。