CSS3转换轻松进出盒子阴影

前端之家收集整理的这篇文章主要介绍了CSS3转换轻松进出盒子阴影前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用 CSS3获取div id,以减轻盒子阴影.

我现在的CSS是:

  1. #how-to-content-wrap-first:hover {
  2. -moz-Box-shadow: 0px 0px 5px #1e1e1e;
  3. -webkit-Box-shadow: 0px 0px 5px #1e1e1e;
  4. Box-shadow: 0px 0px 5px #1e1e1e;
  5. -webkit-transition: Box-shadow 0.3s ease-in-out 0s;
  6. -moz-transition: Box-shadow 0.3s ease-in-out 0s;
  7. -o-transition: Box-shadow 0.3s ease-in-out 0s;
  8. -ms-transition: Box-shadow 0.3s ease-in-out 0s;
  9. transition: Box-shadow 0.3s ease-in-out 0s;

我遇到的问题是,在元素的第一个悬停上,没有放宽或缩小,然后任何后续的徘徊放松,但不要放松.

任何建议人们都会非常感激

解决方法

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

Demo

  1. div {
  2. height: 200px;
  3. width: 200px;
  4. Box-shadow: none;
  5. transition: Box-shadow 1s;
  6. border: 1px solid #eee;
  7. }
  8.  
  9. div:hover {
  10. Box-shadow: 0 0 3px #515151;
  11. }

猜你在找的CSS相关文章