web-dev-qa-db-ja.com

ホバーの境界線のみを移行し、背景は移行しません

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

ただし、これは機能しません。起こる唯一のことは、ホバーでのみ変更したいのに背景色に遷移があり、遷移したい境界線があるので、基本的に境界線は色にフェードしますが、背景色はホバーするとすぐに色が変わります。それは私が達成したいことですが、これはうまくいきません。 :(アイデアのユーザーはいますか？

csshovercss-transitionspseudo-elementpseudo-class
13
MFCS

必要なことは、どのプロパティを適切に移行するかを設定することです。現在、あなたは「すべて」としてそれを持っていますが、それはあなたが移行したいものに基づいて「背景色」または「境界線色」のいずれかである必要があります。

 transition: border-color 1s ease;

http://jsfiddle.net/u3Ahk/

45
Kyle

あなたは多くの方法でボーダー効果を行うことができます。下の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

5
loyola