Question

So I have been trying to write jquery that make one element become active when another one is hovered. This will be used for highlighting areas on a map when a location is hovered.

I have it working for one destination using:

function engageMaps(){ 
  var destination = $(".destination .cancun"); 
  var pin = $(".image_map .cancun"); 
  $(destination).hover( 
    function () { 
      $(pin).addClass("active"); 
    }, 
    function () { 
      $(pin).removeClass("active"); 
    } 
  );
};

But i need it to work for all destinations based off of the elements class. If the classes match then they should be active.

I tried doing something like this (doesn’t work. probably written wrong)

function engageMaps(){ 
  var destination = (($(".destination").children()).attr('class')); 
  var pin = (($(".image_map").children()).attr('class'));
  if($(destination) === $(pin)){
    $(destination).hover( 
      function () { 
        $(pin).addClass("active"); 
      }, 
      function () { 
        $(pin).removeClass("active"); 
      } 
    );
  };
};

and here is the html:

<div class="image_map">
  <a class="cancun" id="cancunPin" href="#">Cancun</a>
  <a class="cozumel" id="cozumel" href="#">Cozumel</a>
</div>
<div class="destinations">
  <ul>
    <li class="destination"><a class="cancun" href="#">Cancun</a></li> 
    <li class="destination"><a class="Cozumel" href="#">Cozumel</a></li>
  </ul>
</div>

If anyone could help me that would be awesome. I hope I explained it well enough.

Answer 1

This might do what you’re wanting. Maybe.

http://jsfiddle.net/sUgyW/

$('.destinations a').hover(
    function () {
        $('.image_map a.' + $(this).attr('class')).addClass('active');
    },
    function () {
        $('.image_map a').removeClass('active');
    }
);

I also tweaked your HTML slightly: changed class="Cozumel" to class="cozumel".