Get ID of the element I hover over with jQuery?

Question

I have a bunch of elements that look like this:

<span class='tags' id='html'>html</span>
<span class='tags' id='php'>php</span>
<span class='tags' id='sql'>sql</span>

How would I get the name of the id of the one I hover over, so I could output something like "You're hovering over the html tag". (What I want to do isn't that arbitrary, but I do need to get the name of the tag the user hovers over in order to do it.)

Answer 1

$('.tags').hover(
  function() { console.log( 'hovering on' , $(this).attr('id') ); },
  function() {}
);

Second empty function is for mouse out, you'll probably want to do something on that event as well.

Answer 2

mouseover should do the trick.

$('.tags').mouseover(function() {
   alert(this.id);
});

Note that if you want to know when the mouse leaves as well, you can use hover.