Ir para conteúdo
Faça parte da equipe! (2024) ×
Conheça nossa Beta Zone! Novas áreas a caminho! ×
  • Quem está por aqui   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.

conflito button:hover e button:active


SonikPlay
 Compartilhar

Posts Recomendados

[spoiler=css]button {

font-family: Arial;

font-size: 14px;

color: white;

padding: 7px 15px;

background-color: black;

border-radius: 6px;

border: 1px solid grey;

}

 

button:active {

transition: 0s;

text-shadow: 1px 3px 4px black;

color: black;

background-color: orange; (2)sobre esta aqui

}

 

button:hover {

background-color: #FF1493; (1)essa cor está prevalecendo...

transition: .3s;

font-size: 20px;

}

 

 

Ao clicar a cor de fundo não muda, sendo direto.

E quando clica, a sombra também está demorando para aparecer, este efeito também queria que fosse imediato, porém o hover "manda" no active.

 

---

 

Queria entender o porque disto e como arrumar e-e

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Bom, vamos lá a pseudo classe :hover so vai ter efeito enquanto você passa o mouse sobre o elemento, e o :active só vai acontecer quando o item estiver ativo ou seja quando ele for clicado. Se esse era realmente o efeito que você queria você pode adicionar um "!important" na cor laranja ficando igual o código a baixo.

[spoiler=Código]

button {

 

font-family: Arial;

font-size: 14px;

color: white;

padding: 7px 15px;

background-color: black;

border-radius: 6px;

border: 1px solid grey;

}

 

button:active {

transition: .0s;

text-shadow: 1px 3px 4px black;

color: black;

background-color: orange!important; (2)!sobre esta aqui

}

 

button:hover {

background-color: #FF1493; (1)!não está mais

transition: .3s;

font-size: 20px;

}

 

 

 

 

 

Animação ficará da seguinte maneira, botão é por padrão preto, mas quando existe um :hover ou seja quando passar o mouse sobre ele o botão vai ficar rosa e quando você clicar nele a pseudo classe :active vai entrar em ação tornando ele laranja, qualquer dúvida manda ae

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Este tópico está impedido de receber novos posts.
 Compartilhar

×
×
  • Criar Novo...

Informação Importante

Nós fazemos uso de cookies no seu dispositivo para ajudar a tornar este site melhor. Você pode ajustar suas configurações de cookies , caso contrário, vamos supor que você está bem para continuar.