div背景颜色过渡不起作用

Question

我在按钮上添加了过渡效果，效果很好

我有一个通过道具（反应）内联定义宽度/高度的div，转换代码看起来与按钮非常相似，所以我不确定它为什么不工作。 对于这个例子，我只想在 hover 时从白色背景简单过渡到红色。

我最初将背景颜色设置为白色，并将：hover 设置为红色：

background-color: red;

transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;

然而，这会导致预期的结果..没有任何过渡

我尝试更改 hover 上的宽度并设置 tranisition: all 1s 但它再次工作而没有任何过渡.. 为什么会发生这种情况？

谢谢

Answer 1

如果您在 hover 上展示更多内容会有所帮助，但我假设您的代码设置可能是这样的：

.box{
    background-color: red;
}
.box:hover{
   transition: background-color 0.5s;
   -webkit-transition: background-color 0.5s;
   -o-transition: background-color 0.5s;
   -moz-transition: background-color 0.5s;
}

它应该是这样的：

.box{
   transition: background-color 0.5s;
   -webkit-transition: background-color 0.5s;
   -o-transition: background-color 0.5s;
   -moz-transition: background-color 0.5s;
}
.box:hover{
    background-color: red;
}

Answer 2

通常，过渡是给元素的。

试试这个 -

Css

div {
  background-color: white;  
  transition: background-color 0.5s ease-in-out;
}
div:hover {
  background-color: red;
}

Sass -

div {
  background-color: white;  
  transition: background-color 0.5s ease-in-out;
  &:hover {
    background-color: red;    
  }
}

Answer 3

感谢您的快速回复。 对于遗漏的细节，我深表歉意。 原来这是因为 AOS（滚动动画）库在对同一元素进行转换时会导致问题。 我通过将 div 包装在另一个 div 中解决了这个问题。

Answer 4

试试这个，如果set initially white到 div 背景。 默认为白色。 所以，我们可以添加transition ，然后hover background change red

CSS

---

.box{ 
     transition: background-color 0.5s; 
 }
.box:hover{ 
     background-color: red; 
 }

SCSS

---

.box{ 
     transition: background-color 0.5s; 
   &:hover{ 
     background-color: red; 
   }
}

试试这个片段。

 .box{ transition: background-color 0.5s; }.box:hover{ background-color: red; }

 <div class="box" style="width:100vh;height:100vh;"></div>