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它是具有转换配置的start元素。

当转换属性的值发生变化时，将触发转换

Answer 2

您的转换不起作用，因为.overlayFeatured并不知道它必须转换，因此它只会立即将不透明度弹出为1。

在您的SCSS中（假设它是SCSS），您在&:hover和.imageOdd上的转换都是多余的。转换应该放在.overlayFeatured上，如此：

<强> SCSS

.overlayFeatured {
        position: absolute;
        height: 100%;
        width: 100%;
        background: rgba(0, 143, 161, 0.2);
        opacity: 0;

        transition: opacity 5s linear; //<======= transition 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我不确定它是否支持SCSS，上面是SCSS）

＆＃13;

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

＆＃13;

<div class="imageOdd">
  <div class="overlayFeatured"></div>
</div>

＆＃13;

希望这有帮助！

如何过渡不透明度以显示另一个div？

2 个答案: