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

jQuery - 当多次使用父DIV类时，在Hover上显示DIV

3 个答案: