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

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