Pseudo-classe :hover
A pseudo-classe :hover aplica estilos a um elemento quando o usuário passa o cursor sobre ele. Essa pseudo-classe é frequentemente usada para criar efeitos de destaque, animações sutis ou interações visuais em resposta às ações do usuário.
Principais características
Ativação por Interação
A pseudo-classe :hover é ativada quando o cursor do mouse está sobre o elemento. Isso significa que os estilos definidos dentro da regra :hover serão aplicados apenas durante a interação do usuário.
.botao {
background-color: #3498db;
color: #fff;
}
.botao:hover {
background-color: #2980b9; /* Altera a cor de fundo ao passar o mouse sobre o botão */
}Hierarquia e Especificidade
A pseudo-classe :hover pode ser usada em conjunto com outras regras CSS, respeitando a hierarquia e a especificidade das regras.
.menu-item {
color: #333;
}
.menu-item:hover {
color: #e67e22; /* Altera a cor do texto ao passar o mouse sobre o item de menu */
font-weight: bold; /* Adiciona negrito ao passar o mouse sobre o item de menu */
}Casos de uso
Estilos dinâmicos
A :hover permite a criação de estilos dinâmicos, proporcionando uma experiência de usuário mais interativa e responsiva. Isso é comumente usado em botões, links e outros elementos interativos.
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #e74c3c; /* Altera a cor do texto ao passar o mouse sobre o link */
text-decoration: underline; /* Adiciona sublinhado ao passar o mouse sobre o link */
}Transições e Animações
A combinação da pseudo-classe :hover com propriedades de transição (transition) ou animações (@keyframes) permite criar efeitos suaves durante a mudança de estado.
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: width 0.3s ease; /* Adiciona transição para a propriedade width */
}
.box:hover {
width: 150px; /* Expande a largura ao passar o mouse sobre a caixa */
}