Qu'est-ce que le sélecteur de souris en CSS?

114

J'ai remarqué que les boutons et autres éléments ont un style par défaut et se comportent en 3 étapes: vue normale, vue survolée / mise au point et vue mousedown / clic, en CSS, je peux changer le style de la vue normale et de la vue survolée comme ceci:

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

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

mais comment puis-je sélectionner le mousedown? Je veux quelque chose comme ça:

button:mousedown{
  //some styling
}

Merci

html css css-selectors multimédiaxp
la source
1
On dirait un double de stackoverflow.com/questions/2725458/css-on-mouse-down
Xavier
@ x4vier: Je ne pense pas. Là encore, il est difficile de dire ce que signifie «souris vers le bas» dans ce cas.
BoltClock

Réponses:

160

Je pense que tu veux dire l'état actif

 button:active{
  //some styling
 }

Voici tous les pseudo états possibles qu'un lien peut avoir en 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 */

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

jansmolders86
la source
2
Je ne veux pas de liens, j'ai besoin de boutons, surtout parce que le survol des appareils mobiles fait un vilain problème. Merci
multimediaxp
Ajouter dans ce cas, je styliserais le bouton plus complètement. En ajoutant une bordure: 0; vous perdez la lunette autour du bouton et le problème que vous rencontrez.
jansmolders86
@ jansmolders86 Savez-vous s'il y a mouseover, mouseleave, mousedown, mouseup selector pour une image ou un bouton en css?
Ng2-Fun
@ J.Fun pas vraiment, vous pouvez essayer d'obtenir l'effet désiré en utilisant l'état: hover pour le over / Leave et le: active pour le down / up. Mais vous ne pouvez pas faire la différence entre les deux sans javascript.
jansmolders86
50

J'ai compris que cela se comportait comme un événement mousedown:

button:active:hover {}
shawn98ag
la source
33

Note de pro-astuce: pour une raison quelconque, la syntaxe CSS a besoin de l':activeextrait de code après le:hoverpour le même élément afin d'être efficace

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

woohooGuy
la source
2
CSS est évalué dans l'ordre, donc cela a du sens; un élément ne peut pas devenir :activeavant qu'il ne soit :hover.
InTheZone
2
En outre, :activeil faut être après :focuspour que cela fonctionne. Merci de l'avoir signalé, je me demandais vraiment pourquoi mon CSS n'avait aucun effet!
Michael
1
@InTheZone Bien sûr, il peut devenir: actif avant d'être: survolé. Vous pouvez l'activer avec le clavier, qui ne plane pas.
ANeves le
2

J'ai récemment découvert que cela :active:focusfaisait la même chose en css que :active:hoversi vous deviez remplacer une bibliothèque css personnalisée, ils pourraient utiliser les deux.

Mees
la source