Was ist der Mouse-Down-Selektor in CSS?

113

Ich habe festgestellt, dass Schaltflächen und andere Elemente einen Standardstil haben und sich in drei Schritten verhalten: Normalansicht, Hover- / Fokusansicht und Mousedown- / Klickansicht. In CSS kann ich den Stil der Normalansicht und der Hoveransicht folgendermaßen ändern:

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

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

aber wie kann ich das mousedown auswählen? Ich möchte so etwas:

button:mousedown{
  //some styling
}

Vielen Dank

html css css-selectors multimediaxp
quelle
1
Sieht aus wie ein Duplikat von stackoverflow.com/questions/2725458/css-on-mouse-down
Xavier
@ x4vier: Das glaube ich nicht. Andererseits ist es schwer zu sagen, was in diesem Fall mit "Maus runter" gemeint ist.
BoltClock

Antworten:

160

Ich denke du meinst den aktiven Zustand

 button:active{
  //some styling
 }

Dies sind alle möglichen Pseudozustände, die ein Link in CSS haben kann:

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

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

jansmolders86
quelle
2
Ich möchte keine Links, ich brauche Schaltflächen, vor allem, weil Hover auf Mobilgeräten einen hässlichen Fehler macht. Vielen Dank
multimediaxp
In diesem Fall würde ich die Schaltfläche vollständiger gestalten. Durch Hinzufügen eines Rahmens: 0; Sie verlieren die Lünette um den Knopf und das Problem, das Sie haben.
jansmolders86
@ jansmolders86 Weißt du, ob es Mouseover, Mouseleave, Mousedown, Mouseup Selector für ein Bild oder eine Schaltfläche in CSS gibt?
Ng2-Fun
@ J.Fun nicht wirklich, Sie könnten versuchen, den gewünschten Effekt zu erzielen, indem Sie den Schwebezustand: für das Über / Verlassen und das: Aktiv für das Ab / Auf verwenden. Aber ohne Javascript kann man nicht zwischen beiden unterscheiden.
jansmolders86
49

Ich habe herausgefunden, dass sich dies wie ein Mousedown-Ereignis verhält:

button:active:hover {}
shawn98ag
quelle
33

Tipp: Aus irgendeinem Grund benötigt die CSS-Syntax das:activeSnippet nach dem:hover für dasselbe Element, um effektiv zu sein

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

woohooGuy
quelle
2
CSS wird in der Reihenfolge ausgewertet, in der dies sinnvoll ist. Ein Element kann nicht werden, :activebevor es ist :hover.
InTheZone
2
Muss :activeauch danach sein, :focusdamit es funktioniert. Vielen Dank, dass Sie darauf hingewiesen haben. Ich kratzte mir wirklich am Kopf, warum mein CSS keine Wirkung hatte!
Michael
1
@InTheZone Natürlich kann es: aktiv werden, bevor es: schwebt. Sie können es mit der Tastatur aktivieren, die nicht schwebt.
ANeves
2

Ich habe kürzlich herausgefunden, dass :active:focusdies in CSS dasselbe bewirkt, als :active:hoverob Sie eine benutzerdefinierte CSS-Bibliothek überschreiben müssten. Möglicherweise werden beide verwendet.

Mees
quelle