Question

所以我在html中有这部分代码：

<img id="id1" src="photo1" usemap="#ir" >
<img  src="photo2" id="id2"/>
<span>
<map name="ir" id="ir">    
<area alt="" title="my title" href="my link" shape="poly" coords="13,15,29,34,10,65,1,39,17,57,357,77,15,64" />    
</map>       
</span>

我有很多区域，我没有写过它们。我对这部分的css是：

#id2 {display: none; opacity: 0.4;}

和这部分的Jquery：

    $(document).ready(function() {
$('span').on('mouseover',function() {
    $('#id2').show();
}).on('mouseleave',function() {
    $('#id2').hide();
});
})

如你所见，我选择一个图像的一部分作为一个链接，它将显示一个不同的照片（具有不透明度）当鼠标过来时，但它不能正常工作。 /> 鼠标过来时应出现的照片不稳定且链接无法正常工作我认为链接和图像代码不能同时工作，只是一个接一个地工作。

Answer 1

如果我理解你的话，请尝试使用mouseenter / mouseleave，并使用悬停事件，其中包括（mouseenter / mouseleave）

$(document).ready(function() {
  var $img = $('#id2');
 $('span').hover(function() {
   $img.show();
 },function() {
   $img.hide();
});

如果您使用鼠标悬停，则与鼠标输出相反（mouselave），mouseleave与mouseenter事件相反。

这两者之间的主要区别在于，mouseenter / mouseleave不会冒泡，但鼠标悬停/鼠标移动会这样做。

此外，在具有子元素的元素上使用mouseover / mouseout时，当鼠标转到子元素时，父触发mouseout。所以看起来鼠标离开了父母，但它只是搬进了一个孩子。

图像在鼠标悬停和鼠标移动时不稳定

1 个答案: