在悬停后定位特定div

Question

我有两种类型的Wordpress帖子，这些帖子包含在链接标记中并通过循环引入。

HTML

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

和

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

当用户将鼠标悬停在.article-image帖子上时，我想将.bg-Hide的不透明度更改为opacity: 1;

但似乎无法创建正确的css目标

Answer 1

尝试：

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

在你的CSS中。