Qual è il contrario di: hover (on mouse leave)?

C'è un modo per fare l'opposto di :hover usare solo CSS? Come in: if :hoveris on Mouse Enter, c'è un CSS equivalente a on Mouse Leave?

Esempio:

Ho un menu HTML che utilizza gli elementi dell'elenco. Quando passo il mouse su uno degli elementi, c'è un'animazione a colori CSS da #999a black. Come posso creare l'effetto opposto quando il mouse esce dall'area dell'oggetto, con un'animazione da blacka #999?

jsFiddle

(Tieni presente che non desidero rispondere solo a questo esempio, ma all'intero :hoverproblema "opposto di ".)

Se ho capito bene, potresti fare la stessa cosa spostando le tue transizioni sul link piuttosto che sullo stato del passaggio del mouse:

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 definizione di hover è:

Il selettore: hover viene utilizzato per selezionare gli elementi quando ci passi il mouse sopra.

Secondo questa definizione l'opposto di hover è qualsiasi punto in cui il mouse non si trova sopra di esso. Qualcuno molto più intelligente di me ha scritto questo articolo, impostando diverse transizioni su entrambi gli stati: 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;
}

Usa solo le transizioni CSS invece delle animazioni.

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

A:hover {
    color: #000;
}

Dimostrazione dal vivo

No, non esiste una proprietà esplicita per il congedo del mouse nei CSS.

Puoi usare: passa il mouse su tutti gli altri elementi tranne l'elemento in questione per ottenere questo effetto. Ma non sono sicuro di quanto sarebbe pratico.

Penso che tu debba guardare a una soluzione JS / jQuery.

Puoi usare la transizione CSS3

Alcuni buoni collegamenti:

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

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

Sebbene le risposte qui siano sufficienti, penso davvero che l' esempio di W3Schools su questo problema sia molto semplice (ha chiarito immediatamente la confusione (per me)).

Utilizzare il :hoverselettore per modificare lo stile di un pulsante quando ci si sposta il mouse sopra.

Suggerimento: utilizza la proprietà di durata della transizione per determinare la velocità dell'effetto "hover":

Esempio

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

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

In sintesi, per le transizioni in cui si desidera che le animazioni di "ingresso" e "uscita" siano le stesse, è necessario utilizzare le transizioni sul selettore principale .buttonanziché sul selettore al passaggio del mouse .button:hover. Per le transizioni in cui desideri che le animazioni "entra" e "esci" siano diverse, dovrai specificare diverse transizioni del selettore principale e del selettore al passaggio del mouse.

Inserisci il tempo di durata nella selezione non al passaggio del mouse:

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

li a:hover {
  padding:19px;
}

Basta aggiungere una transizione all'elemento con cui stai scherzando. Tieni presente che potrebbero verificarsi alcuni effetti durante il caricamento della pagina. Ad esempio, se hai modificato il raggio del bordo, lo vedrai al caricamento del dom.

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

Hai frainteso :hover; dice che il mouse si trova su un elemento, piuttosto che il mouse ha appena inserito l'elemento.

È possibile aggiungere un'animazione al selettore senza :hoverottenere l'effetto desiderato.

Le transizioni sono un'opzione migliore: http://jsfiddle.net/Cvx96/

L'opposto di :hoversembra essere :link.

(edit: non è tecnicamente un opposto, perché ci sono 4 selettori :link, :visited, :hovere :activecinque se si includono. :focus.)

Ad esempio, quando si definisce una regola .button:hover{ text-decoration:none }per rimuovere la sottolineatura su un pulsante, la sottolineatura viene visualizzata quando si tira fuori il pulsante in alcuni browser. L'ho risolto con.button:hover, .button:link{ text-decoration:none }

Questo ovviamente funziona solo per gli elementi che sono effettivamente collegamenti (hanno l'attributo href)

Basta aggiungere una transizione e il nome dell'animazione sulla classe iniziale, nel tuo caso ul li a, aggiungi una proprietà "transizione" e questo è tutto ciò di cui hai bisogno

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>