Co jest przeciwieństwem: hover (po opuszczeniu myszy)?

Czy można zrobić coś przeciwnego, :hover używając tylko CSS? Tak jak w przypadku: jeśli :hoverjest on Mouse Enter, czy istnieje odpowiednik CSS on Mouse Leave?

Przykład:

Mam menu HTML z elementami listy. Kiedy najeżdżam na jeden z elementów, pojawia się kolorowa animacja CSS od #999do black. Jak mogę uzyskać odwrotny efekt, gdy mysz opuszcza obszar elementu, z animacją od blackdo #999?

jsFiddle

(Pamiętaj, że nie chcę odpowiadać tylko na ten przykład, ale na całe „przeciwieństwo :hover” problemu).

Jeśli dobrze rozumiem, możesz zrobić to samo, przenosząc przejścia do łącza zamiast stanu najechania:

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/

Definicja zawisu to:

Selektor: hover służy do wybierania elementów po najechaniu na nie kursorem myszy.

Zgodnie z tą definicją przeciwieństwem wskaźnika najechania jest dowolny punkt, w którym nie znajduje się nad nim mysz . Ktoś znacznie mądrzejszy ode mnie zrobił ten artykuł, ustawiając różne przejścia w obu stanach - 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;
}

Po prostu użyj przejść CSS zamiast animacji.

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

A:hover {
    color: #000;
}

Demo na żywo

Nie, w CSS nie ma wyraźnej właściwości pozostawienia myszy.

Możesz użyć: najedź na wszystkie inne elementy z wyjątkiem danego elementu, aby osiągnąć ten efekt. Ale nie jestem pewien, jak praktyczne byłoby to.

Myślę, że musisz spojrzeć na rozwiązanie JS / jQuery.

Możesz użyć przejścia CSS3

Kilka dobrych linków:

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

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

Chociaż odpowiedzi tutaj są wystarczające, naprawdę uważam, że przykład W3Schools w tej kwestii jest bardzo prosty (wyjaśnił (dla mnie) od razu zamieszanie).

Użyj :hoverselektora, aby zmienić styl przycisku po najechaniu na niego myszą.

Wskazówka: użyj właściwości czasu trwania przejścia, aby określić szybkość efektu „najechania”:

Przykład

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

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

Podsumowując, w przypadku przejść, w których chcesz, aby animacje „wejścia” i „wyjścia” były takie same, musisz użyć przejść na głównym selektorze .buttonzamiast na wskaźniku myszy .button:hover. W przypadku przejść, w których chcesz, aby animacje „wejścia” i „wyjścia” były różne, musisz określić różne przejścia selektora głównego i najechania kursorem.

Umieść czas trwania w opcji bez najechania kursorem:

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

li a:hover {
  padding:19px;
}

Po prostu dodaj przejście do elementu, z którym się bawisz. Należy pamiętać, że ładowanie strony może mieć pewne skutki. Tak jakbyś zmienił promień obramowania, zobaczysz to po załadowaniu domeny.

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

Źle zrozumiałeś :hover; mówi, że mysz znajduje się nad elementem, a nie mysz właśnie weszła w element.

Możesz dodać animację do selektora bez :hoveruzyskania pożądanego efektu.

Przejścia to lepsza opcja: http://jsfiddle.net/Cvx96/

Przeciwieństwem :hoverwydaje się być :link.

(edit: nie technicznie przeciwny ponieważ istnieją 4 selektorów :link, :visited, :hoveri :activepięć, jeśli zawierają. :focus).

Na przykład podczas definiowania reguły .button:hover{ text-decoration:none }usuwającej podkreślenie na przycisku w niektórych przeglądarkach podkreślenie pojawia się po zjechaniu przycisku. Naprawiłem to z.button:hover, .button:link{ text-decoration:none }

Działa to oczywiście tylko w przypadku elementów, które są w rzeczywistości linkami (mają atrybut href)

Po prostu dodaj przejście i nazwę animacji do klasy inicial, w twoim przypadku, ul li a, po prostu dodaj właściwość "przejście" i to wszystko czego potrzebujesz

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>