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
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

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
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
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
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
source