边框和背景转换

Question

我遇到了悬停问题。我想一次更改悬停背景颜色和边框颜色。我使用

transition: all 0.5s ease;  
-vendors-transition: all 0.5s ease; 

但背景颜色变化immedeately

Answer 1

这里是一个工作的代码，

#yourdiv { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background-color: yellow; 
    border: 5px solid black;  
    transition: border 500ms ease-out; 
    -webkit-transition: border 500ms ease-out; 
    -moz-transition: border 500ms ease-out; 
    -o-transition: border 500ms ease-out; 
} 

#yourdiv:hover{ 
    border: 10px solid red; 
    background-color: red; 
} 

Answer 2

我已经单独指定的属性尝试这样做，它的作品，也许是all关键字失败了？

div:hover { 
    background-color: blue; 
    border-color: black; 
    -webkit-transition: background-color 0.5s ease, border-color 0.5s ease; 
    -moz-transition: background-color 0.5s ease, border-color 0.5s ease; 
    /* please note that transitions are not supported in IE 9 and there is no -ms prefix */ 
    transition: background-color 0.5s ease, border-color 0.5s ease; 
} 

jsFiddle

更新：我想我明白你的问题。您希望转换在未盘旋时反转。在这种情况下，你将需要非悬停元素的过渡性质，以及（不:hover一）：

div { 
    width: 10rem; 
    height: 10rem; 
    background-color: purple; 
    border: thick solid orange; 
    -webkit-transition: background-color 0.5s ease, border-color 0.5s ease; 
    -moz-transition: background-color 0.5s ease, border-color 0.5s ease; 
    /* please note that transitions are not supported in IE 9 and there is no -ms prefix */ 
    transition: background-color 0.5s ease, border-color 0.5s ease; 
} 

jsFiddle