O que é o seletor do mouse para baixo no CSS?

114

Notei que os botões e outros elementos têm um estilo padrão e se comportam em 3 etapas: visualização normal, visualização flutuante / foco e visualização do mouse / clique, em CSS posso alterar o estilo da visualização normal e da visualização flutuante assim:

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

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

mas como posso selecionar o mouse? Eu quero algo assim:

button:mousedown{
  //some styling
}

obrigado

html css css-selectors multimediaxp
fonte
1
Parece uma duplicata de stackoverflow.com/questions/2725458/css-on-mouse-down
Xavier
@ x4vier: Acho que não. Então, novamente, é difícil dizer o que significa "mouse para baixo" neste caso.
BoltClock

Respostas:

160

Eu acho que você quer dizer o estado ativo

 button:active{
  //some styling
 }

Estes são todos os pseudo-estados possíveis que um link pode ter em 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 */

Consulte também: http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

jansmolders86
fonte
2
Não quero links, preciso de botões, até porque em dispositivos móveis o hover dá um bug feio. Obrigado
multimediaxp
Nesse caso, acrescente o estilo do botão de forma mais completa. Adicionando uma borda: 0; você perde a moldura ao redor do botão e o problema que está tendo.
jansmolders86
@ jansmolders86 Você sabe se existe mouseover, mouseleave, mousedown, seletor de mouseup para uma imagem ou botão no css?
Ng2-Fun
@ J.Fun não realmente, você pode tentar obter o efeito desejado usando o estado: hover para cima / licença e: ativo para baixo / cima. Mas você não pode diferenciar entre os dois sem javascript.
jansmolders86
50

Eu descobri que isso se comporta como um evento de rato:

button:active:hover {}
shawn98ag
fonte
33

Dica de especialista: por algum motivo, a sintaxe CSS precisa do:activesnippet após o:hoverpara o mesmo elemento para ser eficaz

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

woohooGuy
fonte
2
CSS é avaliado em ordem, então isso faz sentido; um elemento não pode se tornar :activeantes de ser :hover.
InTheZone de
2
Além disso, :activetem que ser depois :focuspara que funcione. Obrigado por apontar isso, eu estava realmente coçando minha cabeça porque meu CSS não estava surtindo efeito!
Michael
1
@InTheZone Claro que pode se tornar: ativo antes de ser: pairado. Você pode ativá-lo com o teclado, que não flutua.
ANeves
2

Recentemente descobri que :active:focusfaz a mesma coisa em css, como :active:hoverse você precisasse substituir uma biblioteca css personalizada, eles podem usar ambos.

Mees
fonte