¿Qué es lo contrario de: hover (al dejar el mouse)?

115

¿Hay alguna forma de hacer lo contrario de :hover usar solo CSS? Como en: si :hoveres así on Mouse Enter, ¿hay un CSS equivalente a on Mouse Leave?

Ejemplo:

Tengo un menú HTML con elementos de lista. Cuando coloco el cursor sobre uno de los elementos, hay una animación de color CSS de #999a black. ¿Cómo puedo crear el efecto contrario cuando el mouse abandona el área del elemento, con una animación de blacka #999?

jsFiddle

(Tenga en cuenta que no deseo responder solo a este ejemplo, sino a todo el problema del "opuesto de :hover").

Cthulhu
fuente
¿Qué estás tratando de hacer exactamente? ¿Quizás hay una alternativa diferente?
Moin Zaman
14
Lo contrario de :hoveres bastante simple :not(:hover); sin embargo, no:hover es sinónimo ni es lo mismo que . CSS no tiene ningún concepto de eventos DOM. onmouseenter:not(:hover)onmouseleave
BoltClock
1
@Cthulhu: :hoversimplemente significa "un elemento que tiene un puntero del mouse sobre él". No indica si el puntero del mouse pasó de otro elemento a este elemento. Simplemente significa que el puntero del mouse está actualmente en el elemento.
BoltClock
1
@BoltClock: ¿no (: hover) en realidad haría nada?
Moin Zaman
5
@Moin Zaman: Sí. Siempre que su mouse no esté sobre un determinado elemento, :not(:hover)se aplicará. Aquí hay una demostración: jsfiddle.net/BoltClock/rghBX
BoltClock

Respuestas:

93

Si entiendo correctamente, podría hacer lo mismo moviendo sus transiciones al enlace en lugar del estado de desplazamiento:

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 definición de hover es:

El selector: hover se usa para seleccionar elementos cuando pasa el mouse sobre ellos.

Según esa definición, lo contrario de hover es cualquier punto en el que el mouse no esté sobre él. Alguien mucho más inteligente que yo ha hecho este artículo, estableciendo diferentes transiciones en ambos estados: 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;
}
SpaceBeers
fuente
1
"(Tenga en cuenta que no deseo responder solo a este ejemplo, sino a todo el problema del" opuesto de: hover ".)"
Cthulhu
1
@Cthulhu: he editado mi respuesta ahora. Eso podría ayudar un poco más. Pensé que era una respuesta demasiado obvia.
SpaceBeers
+1 por señalarme en la dirección correcta. Estaba teniendo una discrepancia de animación entre navegadores. Chrome hacía que todo fuera más fluido, pero tenía un .1s diferente en las transiciones y Mozilla e IE mostraban el error. Pude solucionarlo haciendo coincidir mis números de transición.
Termato
Ugh. La 'definición' de lo :hoverque ha citado es de W3Schools, que de ninguna manera es una fuente autorizada. La especificación real se puede encontrar en w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes , aunque no es la explicación más accesible.
Mark Amery
22

Simplemente use transiciones CSS en lugar de animaciones.

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

A:hover {
    color: #000;
}

Demo en vivo

Marat Tanalin
fuente
Como dije en el ejemplo, mi problema no es con la animación, sino con la parte "al dejar el mouse".
Cthulhu
5
La transición funciona tanto con el mouse sobre como con el mouse. Es suficiente especificar estilos para el estado y el :hoverestado normales .
Marat Tanalin
5

No, no hay una propiedad explícita para dejar el mouse en CSS.

Puede usar: coloque el cursor sobre todos los demás elementos, excepto el elemento en cuestión, para lograr este efecto. Pero no estoy seguro de cuán práctico sería eso.

Creo que debes buscar una solución JS / jQuery.

Moin Zaman
fuente
JS no es necesario en este caso, y ahora lo desaconsejaría, aunque es una justificación del rendimiento.
Alex Chamberlain
No es necesario para el ejemplo anterior, pero parece ser la mejor solución para todo el problema de "dejar el mouse".
Cthulhu
1

Aunque las respuestas aquí son suficientes, realmente creo que el ejemplo de W3Schools sobre este tema es muy sencillo (aclaró la confusión (para mí) de inmediato).

Use el :hoverselector para cambiar el estilo de un botón cuando mueva el mouse sobre él.

Consejo: utilice la propiedad de duración de la transición para determinar la velocidad del efecto "hover":

Ejemplo

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

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

En resumen, para las transiciones en las que desea que las animaciones "entrar" y "salir" sean iguales, debe emplear transiciones en el selector principal en .buttonlugar del selector de desplazamiento .button:hover. Para las transiciones en las que desea que las animaciones "entrar" y "salir" sean diferentes, deberá especificar diferentes transiciones del selector principal y del selector de desplazamiento.

Govind Rai
fuente
1

Ponga su tiempo de duración en la selección sin desplazamiento:

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

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

Simplemente agregue una transición al elemento con el que está jugando. Tenga en cuenta que puede haber algunos efectos cuando se carga la página. Como si hiciera un cambio de radio de borde, lo verá cuando se cargue el dom.

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

José Rasmussen
fuente
0

Has entendido mal :hover; dice que el mouse está sobre un elemento, en lugar de que el mouse acaba de ingresar al elemento.

Puede agregar animación al selector sin :hoverlograr el efecto que desea.

Transitions es una mejor opción: http://jsfiddle.net/Cvx96/

Alex Chamberlain
fuente
1
Tu violín no produce el resultado deseado.
Govind Rai
0

Lo contrario de :hoverparece ser :link.

(edit: técnicamente no es un opuesto, porque hay 4 selectores :link, :visited, :hovery :activecinco si se incluye. :focus).

Por ejemplo, al definir una regla .button:hover{ text-decoration:none }para eliminar el subrayado de un botón, el subrayado aparece cuando quita el botón en algunos navegadores. He arreglado esto con.button:hover, .button:link{ text-decoration:none }

Esto, por supuesto, solo funciona para elementos que en realidad son enlaces (tienen el atributo href)

guionista
fuente
Tu información es incorrecta. :linksimplemente selecciona enlaces, tan simple como eso. Mira aquí la definición de :link: developer.mozilla.org/en-US/docs/Web/CSS/%3Alink
Cthulhu
@ Strive55 Ahhh, gracias, eso tiene sentido. El enlace que proporcionó indica que "Para aplicar un estilo adecuado a los enlaces, debe colocar la regla: link antes que las demás, como se define en el orden LVHA:: enlace -: visitado -: hover -: activo". Si lo entiendo correctamente, eso significa que si ninguno de los otros selectores se aplica (: visitado,: hover o: activo), entonces: enlace es el que se aplica. Técnicamente no es un opuesto, porque hay 4, pero todavía funciona
guionista
0

Solo agregue una transición y el nombre de la animación en la clase inicial, en su caso, ul li a, solo agregue una propiedad de "transición" y eso es todo lo que necesita

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>

Stock Dave
fuente