jQuery - area mouseover should not be there when hover a div inside (over) the img (with the usemap)

Question

I have an img (position: absolute) and a div with text over it (position: absolute). The img has an imagemap, and the problem is that when I want so change the img-opacity when hovering and leaving the area, it calls mouseleave when I hover the div over the image. Is there a simple and elegant solution to solve this?

EDIT: I think I solved it with CSS: I gave a 'pointer-events: none' to the div over the image.

Answer 1

you can use a nested condition:

if(the mouse goes over the image)

{ if (the mouse is over this image || if the mouse is over the div)

 {

     do the job;

 }

}

Answer 2

You could duplicate the code that you have used for the image and apply it to the div

lets say that on mouseenter of the img you set opcaity to a value, then do the same on mouseenter of the div, when mouseenter of the div change the opcity of the image, then also duplicate the code of mouseleave so that opcaity gets set back if the user leaves either the div or the image:

i made a fiddle: http://jsfiddle.net/KpVag/

$('img').on('mouseenter', function() {
    $(this).css('opacity', '0.4');
});

$('img').on('mouseleave', function() {
    $(this).css('opacity', '1');
});

$('div').on('mouseenter', function() {
    $('img').css('opacity', '0.4');
});

$('div').on('mouseleave', function() {
    $('img').css('opacity', '1');
});

[EDIT] After seeing your comment i did an update to the fiddle: http://jsfiddle.net/KpVag/1/

I now use stop to stop the fade animation, so if the mouse leaves the image we start the animation, but if the next event is the mouseenter on our div, then we cancel the fade out animation of the image, if after the mouseleave there is no mouseenter on the div then the animation is not cancelled:

$('img').on('mouseenter', function (event) {
    console.log('wrapper mouseenter');
    $(this).stop().fadeOut('slow', function () {
        // on animation finish
    });
});

$('img').on('mouseleave', function (event) {
    console.log('wrapper mouseleave');
    $(this).fadeIn('slow', function () {
        // on animation finish
    });
});

$('div').on('mouseenter', function (event) {
    console.log('wrapper mouseleave');
    // stop the image fadein animation
    $('img').stop();
});

[/EDIT]