绝对定位的div鼠标事件问题

Question

我有一组图片，当鼠标悬停在上面时需要显示一些信息。问题是信息框没有触发鼠标事件。

#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();
});

当鼠标悬停在图片上时调用if函数，弹出层的所有鼠标事件都不会触发。

感谢您的建议。

- vinay

---

悬停功能是否正常工作？ - peirix

是的，悬停功能正在工作。如果我注释掉悬停功能，鼠标移出功能将适用于绝对定位的 div。 - vinay

如果您在mouseout函数中放置alert("mouseout")会发生什么？ - peirix

它没有触发任何事件，甚至其他标签的点击事件也没有。我猜测是悬停功能出了问题。 - vinay

Answer 1

首先，在 `

` 元素中不能使用 `` 标签，应该使用 `

` 或者 `

` 和 `
• ` 结构来实现。我是通过在 `
  ` 中插入 `` 标签来实现这个目的的。
  

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

  并编辑 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选择器。我不知道你想用图像悬停功能做什么，但它在上述更改后可以工作。

- Taha Rehman Siddiqui