CSS过渡边框和背景同时答案

【问题标题】：CSS transition border and background at the same timeCSS过渡边框和背景同时
【发布时间】：2013-08-31 02:19:09
【问题描述】：

我想同时更改悬停时的背景颜色和边框颜色。我用：

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

但背景颜色会立即改变。

【问题讨论】：

它确实工作正常。认为其他东西压倒了风格。由于小提琴工作正常：jsfiddle.net/nLeVx/1 你能检查任何其他:hover，可能是父 div？

标签： css css-transitions

【解决方案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;
}

【讨论】：

【解决方案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

【讨论】：