¿Qué es lo opuesto a: pasar el mouse (al dejar el mouse)?

¿Hay alguna manera de hacer lo contrario de :hover usando solo CSS? Como en: if :hover está on Mouse Enter , ¿hay un CSS equivalente a on Mouse Leave ?

Ejemplo:

Tengo un menú HTML usando elementos de la lista. Cuando cierro uno de los elementos, aparece una animación en color CSS desde el #999 al black . ¿Cómo puedo crear el efecto opuesto cuando el mouse sale del área de elementos, con una animación de black a #999 ?

jsFiddle

(Tenga en cuenta que no deseo responder solo a este ejemplo, sino a todo el asunto “opuesto a :hover “).

Si entiendo correctamente, podría hacer lo mismo moviendo sus transiciones al enlace en lugar de al 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 de desplazamiento se usa para seleccionar elementos cuando pasa el mouse sobre ellos.

Según esa definición, lo opuesto a hover es cualquier punto en el que el mouse no esté sobre él. Alguien 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; } 

Solo usa transiciones CSS en lugar de animaciones.

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

Demo en vivo

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

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

Creo que tienes que mirar una solución JS / jQuery.

Has malentendido :hover ; dice que el mouse está sobre un elemento, en lugar de que el mouse haya ingresado el elemento.

Puede agregar animaciones al selector sin :hover para lograr el efecto que desee.

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

Lo contrario de :hover parece ser :link .

(editar: no es técnicamente un opuesto porque hay 4 selectores :link :hover :visited :hover y :active . Cinco si 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 suelta el botón en algunos navegadores. He solucionado esto con .button:hover, .button:link{ text-decoration:none }

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

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

Use el :hover selector de desplazamiento para cambiar el estilo de un botón cuando lo mueve sobre él.

Consejo: use la propiedad de duración de 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 “enter” y “exit” sean las mismas, debe emplear transiciones en el .button principal del selector en lugar de en el selector de .button:hover . Para las transiciones en las que desea que las animaciones “enter” y “exit” sean diferentes, deberá especificar las diferentes selecciones del selector principal y del selector de desplazamiento.