如何将鼠标悬停在图像中的文本上时禁用悬停事件

How to disable the hover event when I hover over the text inside the image?

本文关键字：悬停文本事件鼠标图像更新时间：2023-09-26

我的代码中有一个问题，当我将鼠标悬停在图像上时，图像会变大 50%，它会在图像上显示文本，但是当我将鼠标悬停在文本上时，图像将进入鼠标悬停、鼠标悬停、鼠标退出、鼠标悬停的状态。所以它会闪烁很多。当鼠标悬停在图像文本上时，如何禁用此悬停事件？我尝试在文本中event.stopPropagation，但它不起作用。

这是jsFiddle。尝试将鼠标悬停在图像上，然后尝试将鼠标悬停在文本上。这就是我所说的效果。我想禁用文本悬停事件。请帮助我。

我找到了解决方案，

我会做这样的事情。而不是在 img 元素，在父元素 $（'.imgwall'）上执行此操作，然后到只增加图像做一个$（this）.find（'img'）。和 $（this）.find（'h2'）.show（）/hide（）以显示悬停内的文本事件。

感谢您的观看！

如果在文本框内阻止悬停事件，则图像将恢复为小尺寸，因为它仅在悬停时显示较大。

最好将鼠标悬停在 1 个单个元素上，将带有非常大的透明边框的文本框居中。

如果可以，请考虑使用 jQuery Zoom 插件。配置插件，以便在图像上方添加文本框之前。