Question

I thought about if it would be possible to determine which link is hovered. Like if I hover http://google.com/ a div should pop up (display:block) and show the google logo and if I hover stackoverflow.com the stackoverflow logo and so on…

Can this be achieved with a:hover or do I have to put every link in to it’s own div?

Thanks, really much!

Answer 1

You can do this by assigning a listener to all a elements.

$('a').hover(function() {
  var href = $(this).attr('href');
  if (href == 'http://stackoverflow.com') {
    // do your thing
  }
});

If you don’t want to do exact url matching, you can add special data attributes to your a elements and check them instead.

<a data-rel = 'stackover' href="http://stackoverflow.com">SO</a>

$('a').hover(function() {
   var rel = $(this).data('rel');
   if (rel == 'stackover') {
     // do your thing
   }
});