Esta es la respuesta más completa que te podemos aportar, sin embargo mírala pausadamente y valora si se adapta a tu proyecto.
Solución:
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 flotar es:
El selector :hover se usa para seleccionar elementos cuando pasa el mouse sobre ellos.
Según esa definición, lo contrario de pasar el mouse por encima es cualquier punto en el que se mueva el mouse. no encima de eso. Alguien mucho más inteligente que yo ha escrito 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;
Simplemente use 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 :pasar 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 tienes que mirar una solución JS/jQuery.
Te mostramos comentarios y puntuaciones
Finalizando este artículo puedes encontrar las aclaraciones de otros usuarios, tú todavía puedes mostrar el tuyo si lo deseas.