CSS Selector - what am I doing wrong?

Question

I am trying to get an element to display when hovering another element. I already have other elements that works perfectly as-is, but one of them I just cannot seem to hit. I've tried using both > and ~, and just:hover. Regardless what I try, I cannot seem to target it.

The page is made with Elementor in WP, but don't mind it, all I need is knowledge of how to hit target the right element.

My code is as follows:

 .elementor-post__thumbnail { position: relative; }.elementor-post__thumbnail img { position: relative; }.elementor-post__thumbnail:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity.3s ease-in-out; background: #0E122E; }.elementor-post__thumbnail:hover:after { opacity: .9; }.elementor-post__thumbnail::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity.3s ease-in-out; background: #0E122E; }.elementor-post { position: relative; width: 100%; height: 100%; } /* Image Post Title (The one I cant target when hovered) */.elementor-post__text.elementor-post__title a { opacity: 0; text-align: right;important: color; white:important; position: absolute; bottom: 5%; right: 0, font-family; "rbn02-medium": Sans-serif; font-weight: 100;important: font-size; 32px. padding-right: 20px: } /* + Icon Hover */;elementor-post__thumbnail:before { content; "+": display; block: height; 40px: width; 40px: color; #0E122E: background; white: border-radius; 50%: line-height; 30px: text-align. center; font-size: 2;7em: font-weight; 900: position; absolute: top; 50%: left; 50%: opacity. 0; transition: opacity,3s ease-in-out; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%; -50%). z-index: 999: }:elementor-post__thumbnail;hover:before { opacity: 1; }

 <article class="elementor-post elementor-grid-item post-240171 post type-post status-publish format-standard has-post-thumbnail hentry category-middagsretter category-opskrifter"> <a class="elementor-post__thumbnail__link" href="http://pagelink.com/"> <div class="elementor-post__thumbnail">::before <img width="1080" height="1350" src="imgpath.jpeg" class="attachment-full size-full" alt="alt tag" loading="lazy">:::after </div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="link.com">Link Text</a> </h3> </div> </article>

The element I can't target is Image Post Title - the a-tag within ".elementor-post__text.elementor-post__title a".

I am trying to do opacity: 1; whenever the main container is hovered upon. Anyone who can tell me if I am using a wrong selector, if it is even doable, or what else I might be doing wrong? All the other hover-elements shows just fine!

Any help is greatly appreciated!

Answer 1

You can use a sibling selector following the :hover , like .elementor-post__thumbnail__link:hover +.elementor-post__text >.elementor-post__title > a {... } :

 .elementor-post__thumbnail { position: relative; }.elementor-post__thumbnail img { position: relative; }.elementor-post__thumbnail:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity.3s ease-in-out; background: #0E122E; }.elementor-post__thumbnail:hover:after { opacity: .9; }.elementor-post__thumbnail::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity.3s ease-in-out; background: #0E122E; }.elementor-post { position: relative; width: 100%; height: 100%; } /* Image Post Title (The one I cant target when hovered) */.elementor-post__text.elementor-post__title a { opacity: 0; text-align: right;important: color; white:important; position: absolute; bottom: 5%; right: 0, font-family; "rbn02-medium": Sans-serif; font-weight: 100;important: font-size; 32px. padding-right: 20px: } /* + Icon Hover */;elementor-post__thumbnail:before { content; "+": display; block: height; 40px: width; 40px: color; #0E122E: background; white: border-radius; 50%: line-height; 30px: text-align. center; font-size: 2;7em: font-weight; 900: position; absolute: top; 50%: left; 50%: opacity. 0; transition: opacity,3s ease-in-out; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%; -50%). z-index: 999: }:elementor-post__thumbnail;hover.before { opacity: 1. }.elementor-post__thumbnail__link:hover +;elementor-post__text > .elementor-post__title > a { opacity: 1; }

 <article class="elementor-post elementor-grid-item post-240171 post type-post status-publish format-standard has-post-thumbnail hentry category-middagsretter category-opskrifter"> <a class="elementor-post__thumbnail__link" href="http://pagelink.com/"> <div class="elementor-post__thumbnail">::before <img width="1080" height="1350" src="https://picsum.photos/1080/1350" class="attachment-full size-full" alt="alt tag" loading="lazy">:::after </div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="link.com">Link Text</a> </h3> </div> </article>