23.11.2024

CSS: Aplicando hover em um elemento a, excluindo a classe ativa

Resposta Rápida

Você pode adicionar efeitos de estilo de hover para todos os elementos, exceto para uma classe especificada, usando CSS :hover em combinação com :not(), assim:

elemento:hover:not(.classe-excluir) {
  /* estilos para efeitos de hover */
}

Dessa forma, o estilo de hover será aplicado a todos os elementos, exceto aqueles com a .classe-excluir.

Uso Estratégico de Efeitos de Hover

Ao aplicar :not(), você pode excluir elementos com a classe especificada dos estilos de hover. Por exemplo, suponha que você tenha itens de menu e não queira que o item atualmente ativo mude sua representação visual ao passar o mouse:

li:not(.ativo):hover {
  background-color: #ff0; /* Os elementos inativos ficam amarelos ao passar o mouse 😄 */
}

Os itens de menu com a classe .ativo permanecerão inalterados, fazendo com que o item ativo se destaque significativamente.

Código Limpo, Maior Visibilidade

Usar a pseudo-classe :hover após :not() melhora a interação do usuário com os elementos na interface:

a:not(.ativo):hover {
  color: blue; /* Links inativos ficam azuis ao passar o mouse 😉 */
}

A Ordem das Pseudo-classes Não Importa

A ordem de aplicação das pseudo-classes :hover e :not() não afeta a funcionalidade: a:hover:not(.ativo) e a:not(.ativo):hover funcionam de forma idêntica. No entanto, tenha em mente que :not() pode não ser suportado em navegadores mais antigos. Nesses casos, utilize uma versão sem ele:

a.ativo:hover {
  color: initial; /* A cor original do link é restaurada caso soluções de estilo modernas não possam ser usadas */
}

Compatibilidade com Navegadores Antigos

Para suportar várias versões de navegadores, use sobreposição de especificidade para os estilos:

a:hover {
  color: blue; /* Cor brilhante ao passar o mouse disponível para todos */
}
a.ativo {
  color: red; /* Links ativos são destacados, chamando a atenção do usuário */
}

Visualização

Pense no efeito do CSS :hover como um jogo de esconde-esconde: todas as pessoas são visíveis ao passar o mouse, exceto por aquele que se "esconde" atrás da .classe-excluir:

Jogadores: 🧍‍♂️🧍🧍‍♂️🧍‍♂️
CSS hover:
* { visibility: visible; } /* Eu vejo todo mundo */
.exclude-class { visibility: hidden; } /* Eu não vejo você, amigo */

No contexto do CSS, isso se parece com isso:

:not(.classe-excluir):hover {
  opacity: 1; /* Tudo claro e visível */
}
.classe-excluir {
  /* Mas nosso amigo na "classe-excluir" permanece escondido */
}

O jogo de "esconde-esconde" começa, e tudo ocorre como planejado até aplicarmos a .classe-excluir.

Aprofundando no Tópico: Aplicando Efeitos de Hover

Aprimorando a Interação com o Hover

Aprimore a interação do usuário com os elementos, considerando o tamanho dos objetos e a distância entre eles para evitar reações indesejadas durante o hover. O :not() permite que você exclua objetos grandes ou elementos agrupados do efeito de hover.

Mudando Classes com JavaScript

Você pode adicionar ou remover classes programaticamente usando JavaScript para personalizar os estilos de hover conforme suas necessidades:

document.querySelector('.meu-elemento').classList.add('sem-hover'); /* O elemento se torna não responsivo ao hover */

Simplificando o Código Através da Variabilidade do CSS

Simplifique a gestão dos efeitos de hover utilizando variáveis CSS. Isso aumentará a flexibilidade do código e expandirá as opções de personalização:

elemento {
  --efeito-hover: scale(1.2); /* O tamanho original de todos os elementos aumenta */
}

elemento:hover {
  transform: var(--efeito-hover);
}

elemento.sem-hover {
  --efeito-hover: none; /* ...enquanto alguns optam por permanecer em seu tamanho normal */
}

Recursos Úteis

1. CSS :not Selector - W3Schools — Um recurso essencial com uso e exemplos do seletor :not().
2. :hover - CSS: Folhas de Estilo em Cascata | MDN — Uma visão detalhada da pseudo-classe :hover no MDN.
3. Especificações sobre Especificidade CSS | CSS-Tricks — Insights sobre especificidade CSS.
4. Conheça os Seletores de Pseudo Classe CSS | CSS-Tricks — Uma introdução aos seletores de pseudo-classe.
5. :not | CSS-Tricks — Práticas avançadas para utilizar a pseudo-classe :not().

Video

Navigation