Quel est le contraire de: survoler (en congé de la souris)?

Existe-t-il un moyen de faire le contraire d' :hover utiliser uniquement du CSS? Comme dans: si :hoveroui on Mouse Enter, existe-t-il un équivalent CSS à on Mouse Leave?

Exemple:

J'ai un menu HTML utilisant des éléments de liste. Lorsque je passe la souris sur l'un des éléments, il y a une animation de couleur CSS de #999à black. Comment 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 à toute la question de «l'opposé de :hover».)

Si je comprends bien, vous pouvez faire la même chose en déplaçant vos transitions vers le lien plutôt que vers l'état de survol:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

La définition du survol est:

Le sélecteur: hover est utilisé pour sélectionner des éléments lorsque vous passez la souris dessus.

Selon cette définition, l'opposé du survol est tout point auquel la souris n'est pas au-dessus. Quelqu'un de bien plus intelligent que moi a fait cet article, définissant différentes transitions sur les deux états - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Utilisez simplement des transitions CSS au lieu d'animations.

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

Démo en direct

Non, il n'y a pas de propriété explicite pour le congé de la souris dans CSS.

Vous pouvez utiliser: survolez tous les autres éléments à l'exception de l'élément en question pour obtenir cet effet. Mais je ne sais pas dans quelle mesure ce serait pratique.

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

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/

Bien que les réponses ici soient suffisantes, je pense vraiment que l' exemple de W3Schools sur cette question est très simple (cela a tout de suite dissipé la confusion (pour moi)).

Utilisez le :hoversélecteur pour modifier le style d'un bouton lorsque vous déplacez la souris dessus.

Conseil: utilisez la propriété transition-duration pour déterminer la vitesse de l'effet de "survol":

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 où vous souhaitez que les animations «entrée» et «sortie» soient identiques, vous devez utiliser des transitions sur le sélecteur principal .buttonplutôt que sur le sélecteur de survol .button:hover. Pour les transitions où vous voulez que les animations "entrée" et "sortie" soient différentes, vous devrez spécifier différentes transitions de sélecteur principal et de sélecteur de survol.

Mettez votre durée dans la sélection sans survol:

li a {
  background-color: #111;
  transition:1s;
}

li a:hover {
  padding:19px;
}

Ajoutez simplement une transition à l'élément avec lequel vous jouez. Sachez qu'il peut y avoir des effets au chargement de la page. Comme si vous aviez modifié le rayon de la bordure, vous le verrez lorsque le dom se chargera.

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}

Vous avez mal compris :hover; il indique que la souris est sur un élément, plutôt que la souris vient de saisir l'élément.

Vous pouvez ajouter une animation au sélecteur sans :hoverobtenir l'effet souhaité.

Les transitions sont une meilleure option: http://jsfiddle.net/Cvx96/

Le contraire de :hoversemble être :link.

(edit: pas techniquement un opposé parce qu'il ya 4 sélecteurs :link, :visited, :hoveret :activecinq si vous incluez. :focus).

Par exemple, lors de la définition d'une règle .button:hover{ text-decoration:none }pour supprimer le soulignement sur un bouton, le soulignement apparaît lorsque vous désactivez le bouton dans certains navigateurs. J'ai corrigé ça avec.button:hover, .button:link{ text-decoration:none }

Cela ne fonctionne bien sûr que pour les éléments qui sont en fait des liens (ont l'attribut href)

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>