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

Question

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/focus et vue mousedown/click, en CSS je peux changer le style de la vue normale et de la vue survol 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

Answer 1

Je pense que vous voulez dire l'état actif

 button:active{
  //some styling
 }

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

Answer 2

Je me suis rendu compte que cela se comporte comme un événement de type mousedown :

button:active:hover {}

Answer 3

Note pro-tip : pour une raison quelconque, la syntaxe CSS a besoin de l'élément :active extrait après le site :hover pour le même élément afin d'être efficace

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

Answer 4

J'ai récemment découvert que :active:focus fait la même chose en css que :active:hover si vous devez remplacer une bibliothèque css personnalisée, ils peuvent utiliser les deux.

Answer 5

Juste pour la référence en cherchant cela pour moi aussi. J'ai créé un bouton simple et agréable à regarder à partir des années 90. Sur le clic, il ressemble à pressé juste en changeant les couleurs de la frontière en bref.

CSS:

#button {
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;
    border-top: 1px solid white;
    border-left: 1px solid white;
    padding: 5px 30px;
    background-color: gainsboro;
}

#button:active {
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
}

HTML :

<button id="button">Click Here!</button>

Et voici le résultat :

Non cliqué

Cliquez sur