jQuery - Display DIV on Hover, when parent DIV class is used multiple times

Not sure how to fix this probl开发者_运维问答em - I am using jQuery to show a div when another div is hovered over, however I am using the same div class multiple times on the page.

Here is my code:

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

The class "map-item" and "map-item-trail" is used many times, so when you hover over one, is shows the popup div on ALL of them. How can I alter the code so the popup only appears on the item thats being hovered over.

Thanks Zach

Only fade in the elements that can be found in the element that is being hovered over.

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

Without seeing your html mark-up it's difficult to advise specifically, but assuming the third .mapitem-smalldescription relates the to the third .map-item or .map-item-trail, this should work:

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

You can define the same id for each item pair and do something like:

$(".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>

An other solution is to put your smalldescription div just after its div element and use next():

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