web-dev-qa-db-fra.com

Quel est le contraire de: survol (sur la souris)?

Est-il possible de faire l'inverse de :hover en utilisant uniquement CSS? Comme dans: si :hover est on Mouse Enter, existe-t-il un équivalent CSS de 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 couleur CSS de #999 à black. Comment créer l'effet inverse lorsque la souris quitte la zone des éléments avec une animation de black à #999?

jsFiddle

(N'oubliez pas que je ne souhaite pas répondre uniquement à cet exemple, mais à l'ensemble du problème "l'opposé de :hover".)

csshover
97
Cthulhu

Si je comprends bien, vous pouvez faire la même chose en déplaçant vos transitions vers le lien plutôt que vers le 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 de survol est:

Le sélecteur: hover est utilisé pour sélectionner des éléments lorsque vous les survolez avec la souris.

Par cette définition, l'opposé du survol est tout point où la souris est pas dessus. Quelqu'un beaucoup plus intelligent que moi a rédigé cet article, en définissant différentes transitions entre 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;
}
80
SpaceBeers

Il suffit d'utiliser transitions CSS au lieu d'animations.

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

A:hover {
    color: #000;
}

Démo en direct

17
Marat Tanalin

Non, il n'y a pas de propriété explicite pour Mouse Leave 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 suis pas sûr que ce soit pratique.

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

5
Moin Zaman

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/

2
SVS

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

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

Astuce: 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 pour lesquelles vous souhaitez que les animations "enter" et "exit" soient identiques, vous devez utiliser des transitions sur le sélecteur principal .button plutôt que sur le sélecteur de survol .button:hover. Pour les transitions où vous souhaitez que les animations "entrer" et "sortir" soient différentes, vous devez spécifier différentes transitions de sélecteur principal et de survol.

0
Govind Rai

Vous avez mal compris :hover; il dit que la souris est au-dessus d'un élément, plutôt que la souris vient d'entrer dans l'élément.

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

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

0
Alex Chamberlain

Mettez votre durée dans la sélection non-survolée:

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

li a:hover {
  padding:19px;
}
0
Hassan Mahmoud

Le contraire de :hover semble être :link.

(edit: techniquement pas l'inverse car il y a 4 sélecteurs :link, :visited, :hover et :active. Cinq si vous incluez :focus.)

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

Ceci ne fonctionne bien entendu que pour les éléments qui sont réellement des liens (ont l'attribut href)

0
scripter