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

Question

¿Hay alguna manera de hacer lo contrario de :hoverusando solo CSS? Como en: si :hover es on Mouse Enter, ¿hay un CSS equivalente a on Mouse Leave?

Ejemplo:

Tengo un menú HTML utilizando elementos de la lista. Cuando cierro uno de los elementos, hay una animación en color CSS desde #999 hasta 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 yo no deseo contestar solamente este ejemplo, sino a todo el "opuesto de :hover" cuestión.)

Answer 1

Si he entendido bien que podría hacer lo mismo moviendo sus transiciones al enlace en lugar del estado estacionario:

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.

Por esa definición lo contrario de libración es cualquier punto en el que el ratón es no sobre él.Alguien mucho más inteligente que me ha hecho este artículo, el establecimiento de 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; 
} 

Answer 2

No hay ninguna propiedad explícita de permiso ratón 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 tiene que mirar una solución JS/jQuery.

Answer 3

Simplemente use CSS transitions en lugar de animaciones.

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

A:hover { 
    color: #000; 
} 

Live demo

Answer 4

Has entendido mal :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/

Answer 5

Puede usar transición CSS3

Algunos buenos enlaces:

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

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

Answer 6

Lo opuesto a :hover parece ser :link.

(edit: técnicamente no es un opuesto, porque hay 4 selectores :link, :visited, :hover y :active cinco si se incluye :focus..)

Por ejemplo cuando se define una regla .button:hover{ text-decoration:none } a quitar el subrayado en un botón, el subrayado aparece cuando sueltas el botón en algunos navegadores. Me he fijado esto con .button:hover, .button:link{ text-decoration:none }

Por supuesto, esto sólo funciona para los elementos que son en realidad enlaces (tiene atributo href)

Answer 7

Aunque respuestas aquí son suficientes, realmente creo W3Schools ejemplo en este tema es muy sencillo (se aclarado la confusión (para mí) de inmediato).

utilice el selector :hover para cambiar el estilo de un botón cuando se pasa el ratón sobre él.

Consejo: Usar la propiedad de transición de duración para determinar la velocidad de el "flotar" efecto:

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 donde desea que el " ingrese "y" exit "para que las animaciones sean iguales, necesita emplear transiciones en el selector principal .button en lugar del selector de desplazamiento .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.