如何使用 jquery 选择已经具有悬停状态的元素？

【问题标题】：How to select an element that already has an on hover state with jquery?如何使用 jquery 选择已经具有悬停状态的元素？
【发布时间】：2022-01-29 03:24:07
【问题描述】：

我想在另一个元素悬停时将带有 jquery 的 css 样式添加到一个元素，问题是这个另一个元素已经具有 css 悬停效果，我如何使用 jquery 定位这个已经悬停的元素？是一个在悬停时具有覆盖颜色的图像库，我想做的是在图库图像悬停时向 h3 标签添加不透明效果。这是链接：estudiodecimal.com/proyectos/ 这是我尝试过的一些代码

$(".et_pb_gallery_image img").on('hover', function() {
        $("h3.et_pb_gallery_title").css("opacity", 1);
    });

【问题讨论】：

标签： javascript html jquery css onhover

【解决方案1】：

您没有正确定位 h3。由于 H3 和 img 共享一个共同的父级，因此您可以通过 closest() 和 find() 找到 h3，如下所示。我添加了一个 fadeIn 和 fadeOut 而不是显示/隐藏。

$(".et_pb_gallery_image img").hover(imgHover, imgHover)

function imgHover(e) {
  let o = $(this).closest('.et_pb_gallery_item').find("h3");
  if (e.type == 'mouseenter') o.fadeIn();
  else o.fadeOut()
}

h3 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='et_pb_gallery_item'>
  <div class='et_pb_gallery_image'>
    <img src='https://picsum.photos/200/300' />
  </div>
  <h3>Title</h3>
</div>

【讨论】：

谢谢，我已经想通了，我使用了以下代码：