Question

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

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

Answer 1

您可以使用嵌套条件：

if（鼠标移过图像）

{ 如果（如果鼠标位于div上方，则鼠标位于此图像上面）|

 {

     do the job;

 }

}

Answer 2

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

让我们说img的mouseenter你将opcaity设置为一个值，然后在div的mouseenter上做同样的事情，当div的mouseenter改变图像的opcity时，然后复制mouseleave的代码以便opcity如果用户离开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，那么我们取消图像的淡出动画，如果之后mouseleave在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();
});

[/编辑]

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

2 个答案: