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

【问题标题】：Show hidden image on mouseover在鼠标悬停时显示隐藏的图像
【发布时间】：2017-04-10 04:30:06
【问题描述】：

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

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

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

问题是当我将鼠标悬停在区域上时它会显示图像，但是当我移动光标（不离开该区域）时它开始闪烁。它需要一个像素一个像素的区域空间。

我尝试过使用 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);

【问题讨论】：

标签： javascript jquery hover mapping area

【解决方案1】：

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

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

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

【讨论】：

我正在尝试延迟，因为我认为它可能会悬停并悬停在每个像素中。但是带有点事件的解决方案没有任何作用。我没有想到图像会与我的主要悬停区域重叠，从而导致闪烁。您的悬停代码也是一个更好的解决方案。

【解决方案2】：

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

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

【讨论】：

这就是解决方案！谢谢，我忘记了该地区的图像。谢谢！