jQuery - 在多次使用父 DIV 类时，在悬停时显示 DIV

Question

不知道如何解决这个问题 - 我正在使用 jQuery 在另一个 div 悬停时显示一个 div，但是我在页面上多次使用同一个 div 类。

这是我的代码：

$(".map-item, .map-item-trail").live("mouseenter", function() {
 $(".mapitem-smalldescription").fadeIn("normal", function() {  
  });
});

“map-item”和“map-item-trail”类被多次使用，因此当您将鼠标悬停在其中一个上时，会在所有这些上显示弹出 div。如何更改代码以使弹出窗口仅出现在悬停的项目上。

谢谢 扎克

Answer 1

仅淡入可以在被悬停的元素中找到的元素。

$(".map-item, .map-item-trail").live("mouseenter", function() {
  $(this).find(".mapitem-smalldescription").fadeIn("normal", function() {  
  });
});

Answer 2

如果没有看到您的 html 标记，很难给出具体建议，但假设第三个 .mapitem-smalldescription 与第三个 .map-item 或 .map-item-trail 相关，这应该工作：

$(".map-item, .map-item-trail").live("mouseenter", function() {
    var itemIndex = $(this).index();
    $(".mapitem-smalldescription:eq(" + itemIndex + ")").fadeIn("normal", function() {  
  });
});

Answer 3

您可以为每个项目对定义相同的 id 并执行以下操作：

$(".map-item, .map-item-trail").live("mouseenter", function() {
 $(".mapitem-smalldescription[mapitem="+this.id+"]").fadeIn("normal", function() {  
  });
});

<div class="map-item" id="1"></div>
<div class="map-item" id="2"></div>
<div class="mapitem-smalldescription" mapitem="1"></div>
<div class="mapitem-smalldescription" mapitem="2"></div>

---

另一种解决方案是将您的 smalldescription div 放在其 div 元素之后并使用 next()：

$(".map-item, .map-item-trail").live("mouseenter", function() {
 $(this).next().fadeIn("normal", function() {  
  });
});