Co to jest selektor myszy w CSS?

114

Zauważyłem, że przyciski i inne elementy mają domyślną stylizację i zachowują się w 3 krokach: widok normalny, widok najechania / skupienia i widok myszy / kliknięcia, w CSS mogę zmienić stylizację widoku normalnego i widoku po najechaniu w następujący sposób:

button{
  background:#333;
  color:#FFF;
}

button:hover{
  background:#000;
  color:#EEE;
}

ale jak mogę wybrać położenie myszy? Chcę coś takiego:

button:mousedown{
  //some styling
}

dzięki

html css css-selectors multimediaxp
źródło
1
Wygląda na duplikat stackoverflow.com/questions/2725458/css-on-mouse-down
Xavier
@ x4vier: Nie sądzę. Z drugiej strony, trudno powiedzieć, co w tym przypadku oznacza „wciśnięcie myszki”.
BoltClock

Odpowiedzi:

160

Myślę, że masz na myśli stan aktywny

 button:active{
  //some styling
 }

Oto wszystkie możliwe pseudostany, które może mieć łącze w CSS:

a:link {color:#FF0000;}    /* unvisited link, same as regular 'a' */
a:hover {color:#FF00FF;}   /* mouse over link */
a:focus {color:#0000FF;}   /* link has focus */
a:active {color:#0000FF;}  /* selected link */
a:visited {color:#00FF00;} /* visited link */

Zobacz też: http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

jansmolders86
źródło
2
Nie chcę linków, potrzebuję przycisków, szczególnie, że na urządzeniach mobilnych najechanie kursorem powoduje brzydką usterkę. Dzięki
multimediaxp
Dodajmy, że w takim przypadku chciałbym bardziej stylizować przycisk. Dodając obramowanie: 0; tracisz ramkę wokół przycisku i występuje problem.
jansmolders86
@ jansmolders86 Czy wiesz, czy w css znajduje się wskaźnik myszy, przycisk myszy, przycisk myszy, przycisk myszy, wskaźnik myszy dla obrazu lub przycisku?
Ng2-Fun
@ J.Fun niezupełnie, możesz spróbować uzyskać pożądany efekt, używając stanu: hover dla over / leave i: active dla down / up. Ale nie możesz rozróżnić tych dwóch bez JavaScript.
jansmolders86
50

Doszedłem do wniosku, że to zachowuje się jak zdarzenie wyciszenia myszy:

button:active:hover {}
shawn98ag
źródło
33

Pro-tip Uwaga: z jakiegoś powodu, składni CSS potrzebuje:activefragment po:hover dla tego samego elementu, aby być skutecznym

http://www.w3schools.com/cssref/sel_active.asp

woohooGuy
źródło
2
CSS jest oceniany w kolejności, więc ma to sens; element nie może stać się :activewcześniejszy :hover.
InTheZone
2
Ponadto, :activemusi być po :focusgo do pracy. Dzięki za zwrócenie uwagi, naprawdę drapałem się w głowę, dlaczego mój CSS nie działa!
Michael
1
@InTheZone Oczywiście może stać się: aktywny, zanim zostanie: najechany. Możesz go aktywować za pomocą klawiatury, która się nie unosi.
ANeves,
2

Niedawno dowiedziałem się, że :active:focusrobi to samo w css :active:hover, jakbyś musiał zastąpić niestandardową bibliotekę css, mogą używać obu.

Mees
źródło