如何在jquery中选择一个已经在悬停状态下的元素？

Question

当另一个元素处于悬停状态时，我想将带有jquery的css样式添加到元素中，问题是另一个元素已经具有css悬停效应，如何用jquery针对这个已经悬停的元素呢？是一个图片库，在悬停上有一个覆盖颜色，我想要做的是添加一个不透明度效果到一个h3标签时，画廊图像是悬停。这是链接:estudio.jal.com/proyectos/以下是我尝试过的一些代码

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

Answer 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>

​