css - 如何转换不透明度以显示另一个 div？

Question

我用类 .overlayFeatured 创建了 div 并且不透明度为 0 当我将鼠标悬停在父项上时，我想将不透明度转换为 1具有类 .imageOdd 的 div 所以这是我的 css 代码:

         .overlayFeatured{
               position: absolute;
               height: 100%;
               width: 100%;
               background: rgba(0,143,161,0.2);
               opacity: 0;
                         }
          .imageOdd{
               height: 248px;
               box-shadow: 0px 15px 30px -10px rgba(0,0,0,0.3);
               position: relative;
               transition: opacity 5s linear;
               &:hover{
                  cursor: pointer;
                  transition: opacity 5s linear;
                  .overlayFeatured{
                          opacity: 1;
                          .likes{
                               opacity: 1;
                                }
                                  }
                                        }
                                       }

这是html代码:

          <div class="imageOdd mb-3">
              <div class="overlayFeatured">
                  <section class="likes">
                      <div class="cart" 
                       @click="addCart(`<?php echo $featured['name'];?>`)" >
                            <i class="fa fa-book" aria-hidden="true" ></i>
                       </div>
                       <div class="like">
                           <i class="fa fa-heart" aria-hidden="true"></i>
                       </div>
                        </section>
                        </div>
                        <img 
                         src="public/images/<?php echo $featured['image'];?
                         >" alt="" class="img-fluid imageFeatured">
                    </div>

Answer 1

过渡在错误的地方:

.overlayFeatured{
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0,143,161,0.2);
  opacity: 0;
  transition: opacity 5s linear; //<-- transition must be here
}
.imageOdd{
  height: 248px;
  box-shadow: 0px 15px 30px -10px rgba(0,0,0,0.3);
  position: relative;
  &:hover{
    cursor: pointer;
    .overlayFeatured{
      opacity: 1;
      .likes{
        opacity: 1;
      }
    }
  }
}

根据 CSS 文档:https://www.w3schools.com/css/css3_transitions.asp它是具有转换配置的开始元素。

当transition的属性值改变时，触发transition