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

J'ai remarqué que les boutons et d'autres éléments ont un défaut de style et de se comporter en 3 étapes: vue normale, hover/point de vue et mousedown/cliquez sur affichage, dans le CSS, je peux changer le style d'affichage normal et passez vue comme:

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

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

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

button:mousedown{
  //some styling
}

grâce

InformationsquelleAutor multimediaxp | 2013-05-23
  1. 142

    Je pense que tu veux dire l'état actif

     button:active{
  //some styling
 }

    Ce sont tous les pseudo-unis d'un lien peut avoir dans le 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

    • Je ne veux pas pour les liens, j'en ai besoin pour les boutons, spécialement parce que dans les appareils mobiles hover fait un vilain bug. Merci
    • Ajouter dans ce cas, je voudrais style le bouton plus pleinement. Par l'ajout d'un border:0; vous perdez la lunette autour du bouton et le problème que vous rencontrez.
    • Savez-vous si il y a passage de la souris, mouseleave, mousedown, mouseup sélecteur pour une image ou un bouton en css?
    • pas vraiment, vous pourriez essayer d'obtenir l'effet désiré en utilisant le :hover état pour la quitter et l' :actif pour le haut/bas. Mais on ne peut pas différencier entre les deux sans javascript.
    InformationsquelleAutor jansmolders86
  2. 34

    J'ai compris qu'elle se comporte comme un événement mousedown:

    button:active:hover {}
    • Votre exemple a fonctionné pour moi sur Firefox.
    • Cela a fonctionné dans un élément SPAN trop.
    InformationsquelleAutor shawn98ag
  3. 27

    Pro-tip Remarque: pour une raison quelconque, la syntaxe CSS besoins de la :active extrait de après la :hover pour le même élément dans l'ordre pour être efficace

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

    • CSS est évaluée dans l'ordre, ce qui a du sens; un élément ne peut pas devenir :active avant :hover.
    • Aussi, :active doit être après :focus pour que cela fonctionne. Merci de souligner ce point, j'étais vraiment à me gratter la tête pour expliquer pourquoi mon CSS a été de ne pas avoir d'effet!
    • Bien sûr, il peut devenir :active avant d'être :hover ed. Vous pouvez l'activer avec le clavier, ce qui n'est pas stationnaire.
    InformationsquelleAutor woohooGuy
  4. 0

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

    InformationsquelleAutor Mees