Question

我试图制作动画，当我＆＃34; hover＆＃34;元素，显示内容。此内容最初是隐藏的。

所以，仅当动画结束时，必须显示内容，但它不起作用。

请参阅我的代码：

＆＃13;

div{    
  width: 50px;
  height: 50px;
  padding: 35px 26px;
  border-radius: 50%;
  color: #000;
  background: green;
  font-size: 20px;
  transition: 0.4s linear;
}

.content{
  display: none;
  font-weight: initial;    
  transition-delay: 2s  /* not working */
}

.number .content{
  background: #1A1D56;
}

div:hover{
  border-radius: 0;
  width: 250px;  
  height: 80px;
}

div:hover .content{
  display: initial;
  opacity: 1;  
  transition-delay: 2s  /* not working */
}

＆＃13;

<div class="group1">
  <span class="number n1">
        016
    <span class="content">
      bla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla bla
    </span>
  </span>
</div>

<div class="group2">
  <span class="number n2">
        201
    <span class="content">
      bla bla bla bla bla bla bla bla bla bla bla
    </span>
  </span>
</div>

＆＃13;

然而，你可以看到，当绿色圆圈徘徊＆＃34;时，文本（content）会立即加载，这会导致视觉疏远。此外，当文本很大时，它开始加载绿色区域。

所以我想加载它的延迟。

I read here at stackoverflow无法使用transition-delay + display: none。

那么，我该怎么做才能解决这个问题呢？如何仅在悬停完成时才显示文本

Answer 1

您是否尝试使内容的不透明度为0，然后在悬停时使其不透明度为1？

为什么使用display none和transition-delay显示内容不起作用？

1 个答案: