css 过渡：背景颜色和宽度 'cancel' 彼此？

Question

我正在尝试在鼠标悬停时更改 div background-color 和 width。但是，不能使两者都起作用，更改 bg-color 可以，但不能在 3 秒内更改宽度。 CSS代码：

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

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

Fiddle:https://jsfiddle.net/f61ashbu/ 我该如何解决这个问题？

Answer 1

你必须将多个转换写成一条规则，用逗号分隔

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

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

<div>
  Lorem...
</div>

您也可以使用 transition: all 3s ease，但这会激活 :hover 中使用的其他属性。

Answer 2

使用transition: all;

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

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

<div>
  Lorem...
</div>

Answer 3

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

将它分开

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

Answer 4

尝试使用全部作为 [transition-属性]，因为现在您只选择了背景颜色。

transition: all 3s ease;

Answer 5

Use CSS transition:3s ease;

查看片段

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

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

<div>
  Lorem...
</div>

css 过渡：背景颜色和宽度 'cancel' 彼此？

css transition: background-color and width 'cancel' each other?

css

transition