18

ここにいくつかのCSSがあります：

    #image-edges-beneath:hover{
    background-color: blue;
    }

    #image-edges:hover{
      background-color: blue;
    }

    #image-edges-beneat:hover:after{
    -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
      border: 2px solid #F1FD6D;
    }

    #image-edges:hover:after{
    -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
      border: 2px solid #F1FD6D;
    }

ただし、これは機能しません。発生する唯一のことは、ホバー時にのみ変更したい背景色にトランジションがあり、境界線にトランジションが必要なため、基本的に境界線は色にフェードインし、背景色はホバー時にすぐに色が変わります. それが私が達成したいことですが、これはうまくいきません。:(ユーザーのアイデアはありますか？

4

2 に答える 2

52

あなたがする必要があるのは、適切に遷移させたいプロパティを設定することです。現在、「all」として持っていますが、トランジションしたいものに基づいて「background-color」または「border-color」のいずれかである必要があります。

 transition: border-color 1s ease;

http://jsfiddle.net/u3Ahk/

于 2013-01-18T15:02:24.857 に答える
6

さまざまな方法でボーダー効果を行うことができます。以下の css を、境界効果を適用するクラスに適用し、イベントが発生したときに境界線のスタイルを変更します。

 -webkit-transition:  border 3s ease;
 -moz-transition:  border 3s ease;
 -o-transition:  border 3s ease;
 -ms-transition: border 3s ease;
 transition: border 3s ease;

高度な境界効果については、これらのリンクも参照してください

https://codepen.io/giana/pen/yYBpVY

http://cssdeck.com/labs/10-crazy-effects-with-css3-border-transitions

于 2016-07-17T05:31:21.913 に答える