Transition tylko na granicy przy aktywowaniu, ale nie na tle

Question

Tu mam pewne 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; 
    } 

Jednak to nie działa. Jedyne, co się dzieje, to to, że kolor tła ma przejście, podczas gdy ja chcę, aby zmieniał się tylko na zawisie, podczas gdy granica, którą chcę mieć, przechodzi w kolor, podczas gdy kolor tła zmienia kolor natychmiast po najechaniu kursorem . To właśnie chcę osiągnąć, ale to nie działa. :( Wszelkie pomysły użytkowników?

Answer 1

Co musisz zrobić, to ustawić właściwość, którą chcesz poprawnie przetworzyć.Obecnie masz go jako "wszystkie", ale musi być "kolor tła" lub "kolor obramowania" "na podstawie którego ma zostać przeniesione.

transition: border-color 1s ease; 

http://jsfiddle.net/u3Ahk/

Answer 2

można zrobić efekt granicę w wielu sposób. Zastosuj poniżej css do klasy, który zamierzasz zastosować efekt granic i zmiany granicy styl na dowolne zdarzenie.

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

Patrz także te linki do efektów advance granicznych

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

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