Qual é o oposto de: pairar (ao sair do mouse)?

Existe alguma maneira de fazer o oposto de :hover usar apenas CSS? Como em: se :hoverfor on Mouse Enter, há um CSS equivalente a on Mouse Leave?

Exemplo:

Eu tenho um menu HTML usando itens de lista. Quando passo o mouse sobre um dos itens, há uma animação em cores CSS de #999a black. Como posso criar o efeito oposto quando o mouse sai da área do item, com uma animação de blacka #999?

jsFiddle

(Lembre-se de que não desejo responder apenas a este exemplo, mas a toda a questão do "oposto de :hover".)

Se bem entendi, você poderia fazer a mesma coisa movendo suas transições para o link em vez do estado de foco:

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/

A definição de pairar é:

O seletor: hover é usado para selecionar elementos quando você passa o mouse sobre eles.

Por essa definição, o oposto de pairar é qualquer ponto em que o mouse não esteja sobre ele. Alguém muito mais inteligente do que eu fez este artigo, definindo diferentes transições em ambos os 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;
}

Basta usar transições CSS em vez de animações.

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

A:hover {
    color: #000;
}

Demonstração ao vivo

Não, não há propriedade explícita para a licença do mouse em CSS.

Você pode usar: hover sobre todos os outros elementos, exceto o item em questão, para obter esse efeito. Mas não tenho certeza de como isso seria prático.

Acho que você tem que olhar para uma solução JS / jQuery.

Você pode usar a transição CSS3

Alguns bons links:

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

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

Embora as respostas aqui sejam suficientes, eu realmente acho que o exemplo da W3Schools sobre esse assunto é muito simples (ele esclareceu a confusão (para mim) imediatamente).

Use o :hoverseletor para alterar o estilo de um botão ao mover o mouse sobre ele.

Dica: use a propriedade transit-duration para determinar a velocidade do efeito "hover":

Exemplo

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

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

Em resumo, para transições em que você deseja que as animações de "entrada" e "saída" sejam as mesmas, é necessário empregar transições no seletor principal em .buttonvez de no seletor de foco .button:hover. Para transições em que deseja que as animações de "entrada" e "saída" sejam diferentes, você precisará especificar diferentes transições do seletor principal e do seletor de foco.

Coloque seu tempo de duração na seleção sem foco:

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

li a:hover {
  padding:19px;
}

Basta adicionar uma transição ao elemento com o qual você está mexendo. Esteja ciente de que pode haver alguns efeitos quando a página carrega. Como se você fizesse uma mudança no raio da borda, você verá quando o dom carregar.

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

Você entendeu mal :hover; diz que o mouse está sobre um item, em vez de o mouse acabou de entrar no item.

Você pode adicionar animação ao seletor sem :hoverobter o efeito desejado.

Transições é uma opção melhor: http://jsfiddle.net/Cvx96/

O oposto de :hoverparece ser :link.

(edit: não tecnicamente um oposto, porque existem 4 seletores :link, :visited, :hovere :activeCinco se você incluir. :focus).

Por exemplo, ao definir uma regra .button:hover{ text-decoration:none }para remover o sublinhado em um botão, o sublinhado aparece quando você rola o botão para fora em alguns navegadores. Eu consertei isso com.button:hover, .button:link{ text-decoration:none }

É claro que isso só funciona para elementos que são realmente links (têm o atributo href)

Basta adicionar uma transição e o nome da animação na classe inicial, no seu caso, ul li a, basta adicionar uma propriedade "transição" e isso é tudo que você precisa

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>