Question

我正在尝试在鼠标悬停时更改div background-color 和 width 。但是，不能使它兼顾，改变bg色工作但在3秒内改变宽度不会。 CSS代码：

div {
    background-color:gold;
    width:100px;       
    transition: width 3s ease;
    transition: background-color 3s ease;
}

div:hover{
    background-color:#f00;
    width:200px;  
  }

小提琴：volumes 我该如何解决这个问题？

Answer 1

使用CSS 转换：3s轻松;

请参阅代码段

div {
    background-color:gold;
    width:100px;       
    transition:3s ease;
}

div:hover{
    background-color:#f00;
    width:200px;  
  }

<div>
  Lorem...
</div>

Answer 2

您必须将多个转换写为一个由逗号分隔的规则

＆＃13;

div {
  background-color: gold;
  width: 100px;
  transition: width 3s ease, background-color 3s ease;
}

div:hover {
  background-color: #f00;
  width: 200px;
}

＆＃13;

<div>
  Lorem...
</div>

＆＃13;

您也可以使用transition: all 3s ease，但这会为:hover中使用的其他属性设置动画。

Answer 3

使用transition: all;

＆＃13;

div {
    background-color:gold;
    width:100px;       
    transition: all 3s ease;
}

div:hover{
    background-color:#f00;
    width:200px;  
  }

＆＃13;

<div>
  Lorem...
</div>

＆＃13;

Answer 4

你覆盖了你的第一个声明，但你想要同时执行这两个声明，所以你必须用,分隔它。

transition: background-color 3s ease, width 3s ease;

Answer 5

现在尝试使用all作为[transition-property]，只选择背景颜色。

transition: all 3s ease;

css过渡：背景颜色和宽度'取消'对方？

5 个答案: