Targeting specific divs on post hover

Question

I have two types of Wordpress posts which are wrapped in link tags and brought in through the loop.

html

<a id="article-image"> 
  <section> post content </section> 
  <div class="bg-Hide"></div>
</div>

and

<a id="article-title">
  <section> post content </section>
</div>

css

.bg-Hide { 
  position: absolute;
  opacity: 0; 
  width: 100%; height: 100%;
  top: 0; left: 0;  
  background-color: rgba(32, 42, 52, 0.75);
}

I want to change the opacity of .bg-Hide to opacity: 1; when the user hovers over the .article-image posts

But can't seem to create the right css target

There is no parent selector in CSS. You can't add styles to a parent element on hover of the child, at least not with pure CSS. Here's a somewhat related post: https://stackoverflow.com/q/39374918/3597276 — Michael Benjamin, Jun 27 '17 at 20:01
I want to target .bg-Hide when #article-image is hovered on. but thought that there needs to be an 'a' in there also — user3550879, Jun 28 '17 at 00:52
Your code worked Jake, can't give you credit though since it's in the comments — user3550879, Jun 28 '17 at 00:58
Please note that you cannot have more than one `` or `` in the page as `id` **must be unique**. — connexo, Sep 30 '18 at 17:55

score 0 · Answer 1 · answered Jun 27 '17 at 19:39

0

Try:

.bg-Hide:hover {
  opacity:1;
}

In your css.

answered Jun 27 '17 at 19:39

Alan Tweedie

Also in your second snip make sure you are closing your section tag with – Alan Tweedie Jun 27 '17 at 19:45
Thanks, I rewrote it instead of copying and missed that – user3550879 Jun 28 '17 at 00:57

1 Answers1