鼠標事件的絕對位置div的問題

Question

我有鼠標懸停的圖像列表上必須顯示一些信息。問題是鼠標事件不會觸發info 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李的結構，我這樣做，通過插入一個

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

IMG標記和編輯jQuery函數與

$('#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選擇器。我不知道你想用圖像懸停功能做什麼，但它正在與上述變化一起工作。