09.03.2025

Desabilitando o Estilo :hover em Dispositivos Touch com CSS

Resposta Rápida

Para limitar a aplicação dos estilos :hover apenas a dispositivos que conseguem distinguir entre a interação do mouse e a tela sensível ao toque, utilize a consulta de mídia @media (hover: hover):

@media (hover: hover) {
    .elemento:hover {
        background-color: blue; /* Especifique o efeito desejado aqui. */
    }
}

Se os estilos de hover para o .elemento forem definidos dentro dessa consulta de mídia, eles não serão aplicados em dispositivos touch, garantindo uma interface do usuário otimizada.

Usando Consultas de Mídia para Dispositivos Touch e Dispositivos com Hover Habilitado

No desenvolvimento web, é essencial acomodar interfaces tanto para interações com mouse quanto com toque. Consultas de mídia que rastreiam as características do método de entrada permitem interações amigáveis para todos os usuários:

@media (hover: none) and (pointer: coarse) {
    .elemento:hover {
        /* Usuários em dispositivos touch apreciarão a ausência de efeitos indesejados. */
        background-color: inherit;
    }
}

Ao aplicar essas consultas de mídia, eliminamos os estilos de hover em dispositivos touch, utilizando pointer: coarse para indicar um tipo de entrada impreciso e hover: none para especificar que o hover está ausente. Isso simplifica a interação do usuário com a interface ao usar dispositivos touch.

Trabalhando com Ambientes de Entrada Mista

Existem dispositivos híbridos que suportam tanto entrada por toque quanto por mouse. Para esses, uma abordagem mista é adequada: usar JavaScript para detectar o primeiro toque e, em seguida, adicionar uma classe que desabilita todos os estilos :hover:

document.addEventListener('touchstart', function() {
    document.body.classList.add('dispositivo-touch'); /* Nota, este é um dispositivo touch! */
});

Então seu CSS ficaria assim:

.dispositivo-touch .elemento:hover {
    /* Efeitos de hover estão desativados */
    background-color: inherit;
}

Dessa forma, os efeitos de hover estão ativos até o primeiro toque, após o qual eles são desativados e não se aplicam durante o uso subsequente do dispositivo.

Usando Seletores Precisos e Detecção de Capacidades

Para alcançar uma interação mais refinada em dispositivos touch, devem ser empregados seletores avançados e métodos de detecção de capacidades:

@supports ((hover: hover) and (pointer: fine)) {
    .elemento:hover {
        background-color: blue; /* Elementos refinados para dispositivos modernos */
    }
}

Para soluções de compatibilidade mais flexíveis, é recomendado usar a biblioteca Modernizr, que ajuda a avaliar recursos que são difíceis de determinar usando consultas de mídia.

Visualização

Desabilitar o :hover em dispositivos touch e diferentes tipos de interação pode ser representado da seguinte forma:

Desktop (🖥️): Reage ao hover como um artista apresentando uma sinfonia.

Dispositivo Touch (📱): Reage ao toque sem hover, semelhante a um ritmo de tambor.

Solução: Consultas de Mídia (🔍📝)

@media (hover: hover) {
  /* Para dispositivos com entrada precisa */
  .elemento:hover { 
    /* Estilos de hover discretos */
  } 
}

@media (hover: none) {
  /* Para entrada direta */
  .elemento:hover { 
    /* Interface simplificada sem efeitos de hover */
  }
}

O uso de consultas de mídia permite a separação da funcionalidade para diferentes dispositivos em seus projetos.

Melhoria Contínua da Interação e Compatibilidade

Criar um design responsivo é fundamental para uma interação de sucesso e amigável em todos os tipos de dispositivos. Sua estratégia deve definitivamente incluir:

• Utilizar características de mídia (pointer: coarse/fine) para adaptar o design de acordo com as características de cada dispositivo.
• Realizar testes em diversos navegadores e dispositivos para garantir a compatibilidade geral — ferramentas como Microscope-BrowserStack ou testes em dispositivos Petri-dish estão à sua disposição.
• Aplicar as melhores práticas e manter-se atualizado com recursos como MDN Web Docs e "Can I Use" para informações atuais sobre suporte a recursos de mídia CSS.
• Ao utilizar JavaScript para gerenciar :hover, preste atenção aos eventos de interação dos dispositivos para tornar a troca de estilos o mais eficiente possível.
• Não negligencie versões mais antigas dos navegadores que podem não suportar algumas tecnologias modernas. Esteja preparado com um "plano B" ou utilize novos métodos para criar uma interface amigável para todos os usuários.

Recursos Úteis

1. Eventos de ponteiro - Web APIs | MDN — Informações detalhadas sobre o trabalho com diferentes tipos de entrada.
2. Documentação do Modernizr — Informações sobre o Modernizr, uma ferramenta que ajuda a garantir o suporte a recursos.
3. Eventos de Ponteiro — Guia oficial do W3C sobre como gerenciar efeitos de hover em dispositivos.
4. jQuery - Detectando dispositivos com tela touch com Javascript - Stack Overflow — Exemplos da comunidade no Stack Overflow sobre identificação de dispositivos touch.
5. Can I use... Tabelas de suporte para HTML5, CSS3, etc. — Tabelas de compatibilidade para verificar o suporte a consultas de mídia CSS3 e outras tecnologias.

Video

Navigation