35

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

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

人々が持っているアドバイスは大歓迎ですか？

4

3 に答える 3

63

トランジションを使用する必要があり.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>

于 2013-04-23T07:56:44.597 に答える
4

これがリソース効率の高いソリューションです

#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;
}
于 2020-10-14T18:42:14.043 に答える
1

これはうまくいくかもしれません：

 #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;
 }
于 2021-02-17T11:58:15.980 に答える