鼠标事件的绝对位置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选择器。我不知道你想用图像悬停功能做什么，但它正在与上述变化一起工作。