web-dev-qa-db-ja.com

CSS3トランジションボックスシャドウの出し入れ

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;

私が抱えている問題は、要素の最初のホバーでイーズインまたはイーズアウトがなく、その後のホバーは緩和されるが緩和されないということです。

何かアドバイスはありますか？

cssruby-on-railscss3hovercss-transitions
24
Tom Pinchen

.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>
46
Mr. Alien