Quel est le contraire de :hover (à la sortie de la souris) ?

Question

Existe-t-il un moyen de faire le contraire de :hover en utilisant uniquement CSS ? Par exemple : si :hover est on Mouse Enter existe-t-il un CSS équivalent à on Mouse Leave ?

Exemple :

J'ai un menu HTML utilisant des éléments de liste. Lorsque je survole l'un des éléments, il y a une animation de couleur CSS de #999 à black . Comment puis-je créer l'effet inverse lorsque la souris quitte la zone de l'élément, avec une animation de black à #999 ?

jsFiddle

(Gardez à l'esprit que je ne souhaite pas répondre uniquement à cet exemple, mais à l'ensemble de la question du "contraire de"). :hover (question ".)

Answer 1

Non, il n'existe pas de propriété explicite pour la sortie de la souris en CSS.

Vous pourriez utiliser :hover sur tous les autres éléments à l'exception de l'élément en question pour obtenir cet effet. Mais je ne suis pas sûr que cela soit très pratique.

Je pense que vous devez envisager une solution JS / jQuery.

Answer 2

Une autre façon d'utiliser transition consiste simplement à spécifier le millisecondes comme suit : transition: 500ms;

Essayez l'extrait suivant

div{
  background: DeepSkyBlue;
  width:150px;
  height:100px;
  transition: 500ms;
}
div:hover{
  opacity: 0.5;
  cursor:pointer;
}

<div>HOVER ME</div>

Answer 3

Vous pouvez utiliser la transition CSS3

Quelques bons liens :

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understanding-css3-transitions/

Answer 4

Il suffit d'ajouter une transition et le nom de l'animation sur la classe inicial, dans votre cas, ul li a, il suffit d'ajouter une propriété "transition" et c'est tout ce dont vous avez besoin.

ul li {
    display: inline;
    margin-left: 20px;
}

ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}

ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}

@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}

@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}

@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}

@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}

<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>

Answer 5

Bien que les réponses apportées ici soient suffisantes, je pense vraiment que W3Schools sur cette question est très simple (il a immédiatement dissipé la confusion (pour moi)).

Utiliser le :hover pour modifier le style d'un bouton la souris sur celui-ci.

Conseil : Utilisez la propriété transition-duration pour déterminer la vitesse de l'effet "hover". l'effet "hover" :

Exemple

.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

En résumé, pour les transitions dans lesquelles vous souhaitez que les animations d'entrée et de sortie soient identiques, vous devez utiliser des transitions sur le sélecteur principal. .button plutôt que le sélecteur de survol .button:hover . Pour les transitions dans lesquelles vous souhaitez que les animations d'entrée et de sortie soient différentes, vous devrez spécifier des transitions différentes pour le sélecteur principal et le sélecteur de survol.