Question

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

到目前为止，你可以看到我的工作：

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);

Answer 1

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

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

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

Answer 2

有一个名为＆＃34;指针事件＆＃34;的css属性它给出了价值＆＃34;无＆＃34;到映射图像中重叠的img标签，并根据需要工作。这是文档https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

问题始终是浏览器的兼容性。

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

2 个答案: