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);
});
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>