Übergang nur für die Grenze zu schweben, aber nicht für den Hintergrund

Question

Hier habe ich einige 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; 
    } 

Allerdings funktioniert dies nicht. Das einzige, was passiert, ist, dass die Hintergrundfarbe einen Übergang hat, während ich möchte, dass sie sich nur beim Hover ändert, während der Rahmen einen Übergang haben soll, also wird der Rahmen im Grunde in die Farbe übergehen, während die Hintergrundfarbe sofort beim Schweben die Farbe ändert . Das möchte ich erreichen, aber das funktioniert nicht. :( Any ideas users?

Answer 1

Was Sie tun müssen, ist die Eigenschaft, die Sie richtig überführen möchten. Derzeit haben Sie es als "alle" aber es muss entweder "Hintergrund-Farbe" oder "Rand-Farbe "basierend auf dem Sie transitioned werden.

transition: border-color 1s ease; 

http://jsfiddle.net/u3Ahk/

Answer 2

Sie Grenzeffekt in einer viel Art und Weise tun können. die folgenden CSS auf die Klasse anwenden, die Sie Gonna Grenzeffekt anwenden und die Grenze ändern Stil bei jedem Ereignis tritt auf

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

Siehe auch diese Links Voraus Grenze Effekte

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

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