Question

I would like to catch the mouse event for an element that is positioned under an other element.

Here is a example of what I have : http://jsfiddle.net/KVLkp/13/

Now what I want is that blue square has yellow borders when mouse is over red square.

The important things are :

• they are images. So there is no way to embed one element in the
  other.
• this is an easy example, but in reality there are many img. So the
  search of hovered elements by coordinate calculations is not my
  solution (I’ve already found this answer)
• There is no link between the two images except that the mouse is over them all

Thank you for your help

Edit:
I’ve written a more complete example of my general case :
– img order in DOM is not fixed and can be changed on live
– top and bottom image has various size and position

Thanks to all of you!

Answer 1

You could try something along the lines of the following:

<style>
img.hover {
    border-color : yellow;
}​
</style>
<script>
$('img').mouseenter(function () {
    $(this).addClass("hover");
}).mouseleave(function (e) {
    var next = e.relatedTarget;
    if (next.tagName.toUpperCase()!="IMG"
                 || $(next).hasClass("hover"))
       $(this).removeClass("hover");
});
</script>

Rather than setting the colour of the border directly I’ve defined a class called “hover” that sets the colour, so that I can easily test whether a given element has the border without hard-coding colours everywhere, and then I’ve made use of the event.relatedTarget property to see where the mouse is going when it leaves.

The “hover” class is only removed if the element the mouse is going to is not an image or is an image that already has the hover class. Seems to work pretty well in this demo: http://jsfiddle.net/KVLkp/18/, but it won’t work if two images are side-by-side with no gap between them or if the image on top isn’t completely “contained” (in a coordinate sense) by the img it overlaps – I decided to go ahead and post it anyway because I hope that seeing event.relatedTarget in the demo will give you enough of a start to come up with something to fit your real situation.

(Note: “hover” is a bad name for a class given CSS already has the :hover pseudo-class, but by the time I remembered I couldn’t be bothered changing it in the fiddle and here.)