'How to select an element that already has an on hover state with jquery?

I want to add css styles with jquery to an element when another element is hover, the problem is this other element has a css hover effect already, how can i target this already hovered element with jquery? Is a gallery of images that has an overlay color on hover, what i want to do is to add an opacity effect to a h3 tag when the gallery image is hover. This is the link: estudiodecimal.com/proyectos/ Here is some code i tried

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


Solution 1:[1]

You are not targeting the h3 correctly. Since both the H3 and the img share a common parent, you can find the h3 through closest() and find(), like this. I added in a fadeIn and fadeOut rather than a show/hide.

$(".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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kinglish

Related Questions