web-dev-qa-db-fra.com

Transition uniquement pour la frontière en survol, mais pas pour le fond

Ici, j'ai du 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;
    }

Cependant, cela ne fonctionne pas. La seule chose qui se produit est que la couleur d'arrière-plan a une transition alors que je veux qu'elle ne change que lors du survol, tandis que la bordure que je veux avoir une transition, donc en gros la bordure s'estompe dans la couleur tandis que la couleur d'arrière-plan change de couleur immédiatement après le survol . C'est ce que je veux accomplir, mais cela ne fonctionne pas. :( Des utilisateurs d'idées?

csshovercss-transitionspseudo-elementpseudo-class
13
MFCS

Ce que vous devez faire est de définir quelle propriété vous souhaitez transistionner correctement. Actuellement, vous l'avez en tant que "tous", mais il doit être soit "couleur de fond" ou "couleur de bordure" en fonction de la transition à effectuer.

 transition: border-color 1s ease;

http://jsfiddle.net/u3Ahk/

45
Kyle

Vous pouvez faire un effet de bordure de plusieurs façons. Appliquez le CSS ci-dessous à la classe à laquelle vous allez appliquer l'effet de bordure et changez le style de bordure à tout événement.

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

Reportez-vous également à ces liens pour des effets de frontière avancés

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

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

5
loyola