jquery - jQuery - 将 div 悬停在 img 内（上方）时，鼠标悬停区域不应该存在（使用 usemap）

Question

我有一个 img（位置：绝对）和一个带有文本的 div（位置：绝对）。img 有一个图像映射，问题是当我想在悬停和离开该区域时更改 img-opacity 时，当我将 div 悬停在图像上时它会调用 mouseleave。有没有简单而优雅的解决方案来解决这个问题？

编辑：我想我用 CSS 解决了它：我给了图像上的 div 一个“指针事件：无”。

Answer 1

您可以使用嵌套条件：

if（鼠标移过图像）

{ if (鼠标在这张图片上 || 如果鼠标在 div 上)

 {

     do the job;

 }

}

Answer 2

您可以复制用于图像的代码并将其应用于 div

假设在 img 的 mouseenter 上将 opcaity 设置为一个值，然后在 div 的 mouseenter 上执行相同操作，当 div 的 mouseenter 更改图像的 opcity 时，还复制 mouseleave 的代码以便 opcaity 被设置回来如果用户离开 div 或图像：

我做了一个小提琴：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');
});

[编辑] 看到您的评论后，我对小提琴进行了更新：http: //jsfiddle.net/KpVag/1/

我现在使用 stop 来停止淡出动画，所以如果鼠标离开图像我们开始动画，但是如果下一个事件是我们 div 上的 mouseenter，那么我们取消图像的淡出动画，如果鼠标离开那里之后在 div 上没有 mouseenter 则动画不会被取消：

$('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();
});

[/编辑]