CSS3过渡缓和盒子阴影

Question

我正在尝试使用CSS3让div id轻松进出盒子阴影.

我目前的CSS是:

#how-to-content-wrap-first:hover {
-moz-box-shadow: 0px 0px 5px #1e1e1e; 
-webkit-box-shadow: 0px 0px 5px #1e1e1e; 
box-shadow: 0px 0px 5px #1e1e1e;
-webkit-transition: box-shadow 0.3s ease-in-out 0s;
-moz-transition: box-shadow 0.3s ease-in-out 0s;
-o-transition: box-shadow 0.3s ease-in-out 0s;
-ms-transition: box-shadow 0.3s ease-in-out 0s;
transition: box-shadow 0.3s ease-in-out 0s; 

我遇到的问题是,在元素的第一次悬停时,没有缓和进出,然后任何后续的悬停都会缓和但不会缓和.

人们对此有何建议会非常感激？

Answer 1

您需要使用转换.class而不是转换.class:hover

演示

div {
  height: 200px;
  width: 200px;
  box-shadow: 0;
  transition: box-shadow 1s;
  border: 1px solid #eee;
}

div:hover {
  box-shadow: 0 0 3px #515151;
  ;
}