jquery - 图像在鼠标悬停和鼠标离开时不稳定

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

如果使用mouseover，对应的是mouseout(不是mouselave)，mouseleave对应的是mouseenter事件。

这两者之间的主要区别在于 mouseenter/mouseleave 不会冒泡，而 mouseover/mouseout 会冒泡。

此外，当在具有子元素的元素上使用 mouseover/mouseout 时，当鼠标移至子元素时，父元素会触发 mouseout。所以看起来鼠标已经离开了父级，但它只是进入了子级。