我想同时更改悬停时的背景颜色和边框颜色。我用:
transition: all 0.5s ease;
-vendors-transition: all 0.5s ease;
但背景颜色会立即改变。
我想同时更改悬停时的背景颜色和边框颜色。我用:
transition: all 0.5s ease;
-vendors-transition: all 0.5s ease;
但背景颜色会立即改变。
这是一个工作代码,
#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;
}
我已经通过单独指定属性来尝试过这个并且它可以工作,也许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;
}
更新:我想我理解你的问题。您希望过渡在取消悬停时反转。在这种情况下,您还需要非悬停元素上的转换属性(没有 的元素: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;
}