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

¿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").

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;
}

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: 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.

Puedes usar la 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/

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.

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

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

li a:hover {
  padding:19px;
}

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;
}

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/

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)

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>