div背景颜色过渡不起作用

问题描述

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

我有一个通过props（反应）内联定义的宽度/高度的div，过渡代码看起来与按钮非常相似，所以我不确定为什么它不起作用。在此示例中，我只想将鼠标悬停时从白色背景到红色的简单过渡。

我最初将背景色设置为白色，并将：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;

However this results in the expected result.. without any transition

我尝试更改悬停的宽度并设置tranisition：全为1，但是它又可以正常工作而没有任何过渡。.为什么会这样？

谢谢

解决方法

如果您显示了悬停时的更多内容，将会很有帮助，但我假设您可能已将代码设置为以下内容：

.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;
}

,

通常，对元素进行过渡。

试试看-

Css

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

无礼-

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

,

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

,

如果set initially white为div背景，请尝试此操作。 默认为白色。 因此，我们可以添加transition，然后将hover的{​​{1}}添加到background change

CSS

---

red

SCSS

---

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

尝试此代码段。

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

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