CSS3 Transition Легкость входа и выхода Box Shadow

Я пытаюсь получить div id, чтобы облегчить использование теневого окна с помощью CSS3 и из него.

В текущем 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;

Проблема, с которой я столкнулась, заключается в том, что при первом наведении элемента нет ослабления или выхода, а затем любые последующие наводки облегчают, но не облегчают.

Любые советы, которые люди будут очень ценны?

Ответы

Ответ 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>