在鼠标悬停时显示隐藏图像

Question

尝试在映射图像上实现悬停效果时遇到问题。我有一个带有映射区域的图像，我想在所有这些区域上悬停时显示不同的图像。

你可以在这里看到我目前的工作：

http://mantasmilka.com/map/pries-smurta.html

问题是当我将鼠标悬停在区域上时它显示图像，但是当我移动光标（不离开该区域）时它开始闪烁。它逐个像素占用 space 区域。

我已经尝试使用 Javascript 和 jQuery 解决方案：

Javascript:

mouseenter="document.getElementById('Vilnius').style.display = 'block';" mouseleave="document.getElementById('Vilnius').style.display = 'none';"

jQuery:

$('.hide').hide();
setTimeout(function(){
    $("#area-kaunas").mouseenter(function(){
        $('#Kaunas').show();
    });
    $("#area-kaunas").mouseleave(function(){
        $('#Kaunas').hide();
    });
}, 500);

Answer 1

为什么不直接在 jQuery 中使用 hover()？我也不确定为什么要在 500 毫秒超时后绑定事件？

$('.hide').hide();

$("#area-kaunas").hover(function() {
    $('#Kaunas').show();
}, function() {
    $('#Kaunas').hide();
});

Answer 2

有一个名为 "pointer-event" 的 css 属性，它将值 "none" 赋予映射图像中重叠的 img 标签，并按您的需要工作。这是文档 https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

问题永远是浏览器的兼容性。

在鼠标悬停时显示隐藏图像

Show hidden image on mouseover

javascript

mapping

jquery

area

hover