Cos'è il selettore del mouse in CSS?

114

Ho notato che i pulsanti e altri elementi hanno uno stile predefinito e si comportano in 3 passaggi: visualizzazione normale, visualizzazione al passaggio del mouse / messa a fuoco e visualizzazione del mouse / clic, in CSS posso modificare lo stile della visualizzazione normale e della visualizzazione al passaggio del mouse in questo modo:

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

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

ma come posso selezionare il mousedown? Voglio qualcosa di simile:

button:mousedown{
  //some styling
}

Grazie

html css css-selectors

— multimediaxp
fonte

1

Sembra un duplicato di stackoverflow.com/questions/2725458/css-on-mouse-down

— Xavier,

@ x4vier: non credo. Inoltre, in questo caso è difficile dire cosa si intende per "mouse premuto".

— BoltClock

160

Penso che intendi lo stato attivo

 button:active{
  //some styling
 }

Questi sono tutti i possibili pseudo stati che un collegamento può avere in 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 */

Vedi anche: http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

— jansmolders86
fonte

2

Non voglio collegamenti, ho bisogno di pulsanti, specialmente perché nei dispositivi mobili il passaggio del mouse crea un brutto problema tecnico. Grazie

— multimediaxp

Aggiungi in tal caso lo stile del pulsante in modo più completo. Aggiungendo un bordo: 0; perdi la cornice attorno al pulsante e il problema che stai riscontrando.

— jansmolders86

@ jansmolders86 Sai se c'è mouseover, mouseleave, mousedown, selettore mouseup per un'immagine o un pulsante in CSS?

— Ng2-Fun

@ J.Fun non proprio, potresti provare a ottenere l'effetto desiderato utilizzando lo stato: hover per over / leave e: active per down / up. Ma non puoi distinguere tra i due senza javascript.

— jansmolders86

50

Ho capito che questo si comporta come un evento mousedown:

button:active:hover {}

— shawn98ag
fonte

33

Pro-punta Nota: per qualche ragione, la sintassi CSS ha bisogno del:activeframmento dopo la:hoverper lo stesso elemento al fine di essere efficace

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

— woohooGuy
fonte

2

CSS viene valutato in ordine, quindi ha senso; un elemento non può diventare :activeprima di esserlo :hover.

— InTheZone

2

Inoltre, :activedeve essere dopo :focusperché funzioni. Grazie per averlo sottolineato, mi stavo davvero grattando la testa sul motivo per cui il mio CSS non aveva alcun effetto!

— Michael

1

@InTheZone Ovviamente può diventare: attivo prima di essere: hover'ed. Puoi attivarlo con la tastiera, che non oscilla.

— ANeves

2

Recentemente ho scoperto che :active:focusfa la stessa cosa in CSS come :active:hoverse avessi bisogno di sovrascrivere una libreria CSS personalizzata, potrebbero usare entrambi.

— Mees
fonte