css переход: цвет фона и ширина 'отменить' друг друга?

Question

Я пытаюсь сменить div background-color и ширина на мыши наведите указатель мыши. Тем не менее, он не может заставить его работать, меняя работу 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

Использование CSS переход: 3s легкость;

см фрагмент

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

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

<div> 
 
    Lorem... 
 
</div>

Answer 2

Вы должны написать несколько переходов, как правило, один разделённых запятыми

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 3

использование transition: all;

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

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

<div> 
 
    Lorem... 
 
</div>

Answer 4

Вы перезаписать первое заявление, но вы хотите выполнить и, таким образом, вы должны отделить его ,.

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

Answer 5

Попробуйте использовать все как [свойство перехода], так как прямо сейчас вы выбираете только фоновый цвет.

transition: all 3s ease;