Question

I have a jQuery script that, hovering a certain anchor, finds the span inside it and shows it. So the HTML structure is something like:

<a class="class" href="#">
  <img src="img.jpg"/> 
     <p>SOME TEXT</p>
  <span class="class2">
     <p>SOME CONTENT</p>
  </span>
</a>

And the script to show it goes something like:

$('a.class').live('mouseover', function (e) {
   $(e.srcElement).find('.class2').fadeTo('slow', 1);
});

The problem I have is: The hover effect works when hovering the text (SOME TEXT), but it doesn’t when hovering the image (img.jpg). Is there a reason I’m missing for this? Because a.class should grab everything inside the anchor, but why is it not grabbing the image?

Answer 1

I’m curious where you read to use srcElement, as this is the property used in older versions of Internet Explorer when the event object was bound to the window object. If you wanted to get the element that invoked the even to begin with, you should use either e.target, or this (though this changes reference depending on where it’s used).

$("a.class").on("mouseenter", function(){
  $(".class2", this).fadeTo("slow", 1);
});

Keep in mind that the a element isn’t a block level element. It will only be about 20px tall or so. In the image below I’ve changed the background color of the anchor to be light green:

As you can see, while the “SOME TEXT” and big kitty image are technically nested within the anchor, they fall outside of its boundary. If we sets its display to block, we can change this:

a.class {
  display:block;
}