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;
  ;
}

<div></div>

Answer 2

这是一个资源高效的解决方案

#how-to-content-wrap-first::after{
    /* Pre-render the bigger shadow, but hide it */
    box-shadow: 3px 3px 5px -1px #80aaaa;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;         
}
#how-to-content-wrap-first:hover::after {
    /* Transition to showing the bigger shadow on hover */
    opacity: 1;
}

Answer 3

可以这样做:

 #how-to-content-wrap-first:hover{
      box-shadow : inset 0 1px 1px rgba(0,0,0,.075);
      -webkit-transition : box-shadow ease-in-out .15s;
      transition : box-shadow ease-in-out .15s;
 }