Czy można zrobić coś przeciwnego, :hover
używając tylko CSS? Tak jak w przypadku: jeśli :hover
jest 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 #999
do black
. Jak mogę uzyskać odwrotny efekt, gdy mysz opuszcza obszar elementu, z animacją od black
do #999
?
(Pamiętaj, że nie chcę odpowiadać tylko na ten przykład, ale na całe „przeciwieństwo :hover
” problemu).
:hover
jest 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
:hover
oznacza 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.:not(:hover)
zostanie zastosowany. Oto demo: jsfiddle.net/BoltClock/rghBXOdpowiedzi:
Jeśli dobrze rozumiem, możesz zrobić to samo, przenosząc przejścia do łącza zamiast stanu najechania:
http://jsfiddle.net/spacebeers/sELKu/3/
Definicja zawisu to:
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/
źródło
: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.Po prostu użyj przejść CSS zamiast animacji.
Demo na żywo
źródło
:hover
stanu.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.
źródło
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/
źródło
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).
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
.button
zamiast 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.źródło
Umieść czas trwania w opcji bez najechania kursorem:
źródło
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.
źródło
Ź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
:hover
uzyskania pożądanego efektu.Przejścia to lepsza opcja: http://jsfiddle.net/Cvx96/
źródło
Przeciwieństwem
:hover
wydaje się być:link
.(edit: nie technicznie przeciwny ponieważ istnieją 4 selektorów
:link
,:visited
,:hover
i:active
pięć, 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)
źródło
:link
po prostu wybiera linki, tak proste. Spójrz tutaj na definicję:link
: developer.mozilla.org/en-US/docs/Web/CSS/%3AlinkPo 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
źródło