javascript - 带有悬停的 img 上的 Html/CSS 过滤器，但 aperes 的文本会干扰悬停功能并让过滤器消失+文本

Question

对不起我的标题不好xD

我想做的是:我有一张图片，当我将鼠标悬停在它上面时，它会变灰，并且图片上会出现文字。

我的问题是:当您将鼠标悬停在文本上时，滤镜+文本会消失，因为文本覆盖了图片。

有办法解决吗？

感谢您的帮助。 :)

Answer 1

它应该看起来像这样:

<div class="hover-wrapper" onmouseover="showText('hover-text-1')">
  <div class="hover-text" id="hover-text-1">My Text</div>
  <img class="hover-img" src="mypath/myimage.jpg">
</div>

在包装器 div 标签而不是 img 标签上执行鼠标悬停事件，并使用它来切换悬停文本上的显示 CSS 你应该一切都很好。