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

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