¿Qué es el selector de mouse hacia abajo en CSS?

114

He notado que los botones y otros elementos tienen un estilo predeterminado y se comportan en 3 pasos: vista normal, vista de desplazamiento / enfoque y vista de mouse / clic, en CSS puedo cambiar el estilo de la vista normal y la vista de desplazamiento de esta manera:

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

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

pero ¿cómo puedo seleccionar el mousedown? Quiero algo como esto:

button:mousedown{
  //some styling
}

Gracias

html css css-selectors

— multimediaxp
fuente

1

Parece un duplicado de stackoverflow.com/questions/2725458/css-on-mouse-down

— Xavier

@ x4vier: No lo creo. Por otra parte, es difícil saber qué se entiende por "mouse hacia abajo" en este caso.

— BoltClock

160

Creo que te refieres al estado activo

 button:active{
  //some styling
 }

Estos son todos los posibles pseudoestados que puede tener un enlace 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 */

Ver también: http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

— jansmolders86
fuente

2

No quiero enlaces, necesito botones, especialmente porque en los dispositivos móviles, hover produce un error feo. Gracias

— multimediaxp

En ese caso, agregaría un estilo más completo al botón. Añadiendo un borde: 0; pierde el bisel alrededor del botón y el problema que tiene.

— jansmolders86

@ jansmolders86 ¿Sabe si hay un selector de mouseover, mouseleave, mousedown, mouseup para una imagen o botón en css?

— Ng2-Fun

@ J.Fun realmente no, podría intentar obtener el efecto deseado usando el estado: hover para over / leave y: active para down / up. Pero no puede diferenciar entre los dos sin javascript.

— jansmolders86

50

Descubrí que esto se comporta como un evento de mousedown:

button:active:hover {}

— shawn98ag
fuente

33

Nota profesional: por alguna razón, la sintaxis CSS necesita el:activefragmento después del:hoverpara el mismo elemento para que sea eficaz

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

— woohooGuy
fuente

2

CSS se evalúa en orden para que esto tenga sentido; un elemento no puede convertirse :activeantes de ser :hover.

— InTheZone

2

Además, :activetiene que ser posterior :focuspara que funcione. Gracias por señalar esto, ¡realmente me estaba rascando la cabeza en cuanto a por qué mi CSS no tenía ningún efecto!

— Michael

1

@InTheZone Por supuesto que puede volverse: activo antes de ser: suspendido. Puede activarlo con el teclado, que no se desplaza.

— ANeves

2

Recientemente descubrí que :active:focushace lo mismo en css como :active:hoversi necesitara anular una biblioteca css personalizada, podrían usar ambos.

— Mees
fuente