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

115

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

Cthulhu
źródło
Co dokładnie próbujesz zrobić? Może jest inna alternatywa?
Moin Zaman,
14
Przeciwieństwem :hoverjest po prostu :not(:hover); jednak nie:hover jest synonimem ani nie jest tym samym co . CSS nie ma żadnej koncepcji zdarzeń DOM. onmouseenter:not(:hover)onmouseleave
BoltClock
1
@Cthulhu: :hoveroznacza po prostu „element, nad którym znajduje się wskaźnik myszy”. Nie wskazuje, czy wskaźnik myszy przeszedł z innego elementu do tego elementu. Oznacza to po prostu, że wskaźnik myszy znajduje się obecnie na elemencie.
BoltClock
1
@BoltClock: czy faktycznie (: hover) cokolwiek nie zostanie uruchomione?
Moin Zaman,
5
@Moin Zaman: Tak. Dopóki wskaźnik myszy nie jest nad określonym elementem, :not(:hover)zostanie zastosowany. Oto demo: jsfiddle.net/BoltClock/rghBX
BoltClock

Odpowiedzi:

93

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;
}
SpaceBeers
źródło
1
„(Pamiętaj, że nie chcę odpowiadać tylko na ten przykład, ale na całe zagadnienie„ przeciwieństwo: hover ”.)”
Cthulhu
1
@Cthulhu - zredagowałem teraz moją odpowiedź. To może trochę bardziej pomóc. Pomyślałem, że to zbyt oczywista odpowiedź.
SpaceBeers
+1 za wskazanie mi właściwego kierunku. Wystąpiła rozbieżność animacji między przeglądarkami. Chrome renderował wszystko płynniej, ale miałem różne przejścia .1, a Mozilla i IE wyświetlały błąd. Udało mi się to naprawić, dopasowując moje numery przejścia.
Termato
Fuj. „Definicja” :hover, którą zacytowałeś, pochodzi z W3Schools, które w żaden sposób nie są autorytatywnym źródłem. Aktualną specyfikację można znaleźć na w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes , chociaż nie jest to najbardziej przystępne wyjaśnienie.
Mark Amery,
22

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

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

A:hover {
    color: #000;
}

Demo na żywo

Marat Tanalin
źródło
Jak powiedziałem na przykładzie, moim problemem nie jest animacja, ale część związana z wyjściem myszy.
Cthulhu
5
Przejście działa zarówno po najechaniu myszą, jak i po jej opuszczeniu. Wystarczy określić style dla stanu normalnego i :hoverstanu.
Marat Tanalin
5

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.

Moin Zaman
źródło
JS nie jest potrzebny w tym przypadku i teraz odradzam go, chociaż uzasadnia wykonanie.
Alex Chamberlain
Nie jest to potrzebne w powyższym przykładzie, ale wydaje się być najlepszym rozwiązaniem całego problemu „opuszczenia myszy”.
Cthulhu
1

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.

Govind Rai
źródło
1

Umieść czas trwania w opcji bez najechania kursorem:

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

li a:hover {
  padding:19px;
}
Hassan Mahmoud
źródło
1

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

José Rasmussen
źródło
0

Ź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/

Alex Chamberlain
źródło
1
Twoje skrzypce nie dają zamierzonego rezultatu.
Govind Rai
0

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)

skrypter
źródło
Twoje dane są nieprawidłowe. :linkpo prostu wybiera linki, tak proste. Spójrz tutaj na definicję :link: developer.mozilla.org/en-US/docs/Web/CSS/%3Alink
Cthulhu
@ Strive55 Ahhh, dzięki, to ma sens. Link, który podałeś, stwierdza, że ​​„Aby odpowiednio stylizować linki, musisz umieścić regułę: link przed innymi, zgodnie z kolejnością LVHA:: link -: odwiedzone -: hover -: active.” Jeśli dobrze rozumiem, oznacza to, że jeśli żaden z pozostałych selektorów nie ma zastosowania (: odwiedzone,: hover lub: aktywne), to: link jest tym, który ma zastosowanie. Technicznie nie jest odwrotnie, bo są 4, ale nadal działa
scriptter
0

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>

Stock Dave
źródło