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>