Question

我有一个像这样的基本叠加：

<div class="wrap">
  <div class="overlay"></div>
</div>

.wrap {
  position:relative;
}
.overlay {
  position:absolute;
  top:0; left:0; bottom:0; right:0;
  display:none;
}
.wrap:hover .overlay {
  display:block;
}

我想放一个

.??? {
    transition: all .3s ease-in;
}

在叠加显示中轻松自如。当你有一个伪元素绑定到悬停在选择器链中的一个先前元素上，并在选择器链中显示一个元素时，是否可以使用css转换？（.wrap：hover .overlay）如果是这样，对于什么选择器？我无法获得叠加层或其任何子节点来进行转换。不能在这里使用js。我尝试了.wrap和.overlay以及.overlay中的子项的转换。

Answer 1

瓦尔斯的评论是正确的。也就是说，您无法动画从display:none到display:block的过渡。

然而，这并不意味着您无法直观地创造效果。有几种方法可以实现这一点，但最简单的方法（基于您的标记）是在悬停时将叠加div从opacity:0转换为opacity:1，如下面的代码段所示：

＆＃13;

.wrap {
  position:relative;
  height:100px;
  width:100px;
  background:red;
}
.overlay {
  position:absolute;
  top:0; left:0; bottom:0; right:0;  
  height:100px;
  width:100px;
  background:blue;
  transition: all .3s ease-in;
  
  opacity:0; /*hide the overlay by default */
}
.wrap:hover .overlay {
  opacity:1; /*show the overlay */

＆＃13;

<div class="wrap">
  <div class="overlay"></div>
</div>

＆＃13;

选择器后面的CSS转换：悬停

1 个答案: