jQuery的 - 区域鼠标悬停不应该在那里时，悬停div（内）img（用usemap）

Question

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

编辑：我想我解决了它与CSS：我给了'指针事件：无'的图像的股利。

Answer 1

，你可以使用嵌套的条件：

如果（鼠标越过图像）

{ 如果（鼠标移动到该图像||如果鼠标在DIV）

{ 

    do the job; 

} 

}

Answer 2

你可以复制的代码，你可能用的图像，并将其应用到div

可以说在img的mouseenter上设置opcaity为一个值，然后在div的mouseenter上做同样的事情，当div的mouseenter改变图像的opcity时，同样复制mouseleave的代码，以便opcaity被重新设置，如果用户离开或者股利或图像：

我犯了一个小提琴：http://jsfiddle.net/KpVag/1/

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

[编辑] 看到您的评论我做了一个更新的小提琴后

我现在用sto p停止淡出动画，所以如果鼠标离开图像，我们开始动画，但是如果下一个事件是鼠标在我们的div上，那么我们取消淡出动画的图像，如果鼠标后没有鼠标在DIV那么动画没有被取消：

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

[/编辑]