0

Preciso ocultar um ícone "X" quando o dispositivo estiver em uma resolução web em que possua o cursor de ponteiro e manter nos dispositivos com touch (ex: tablet e mobile).

Não sei se preciso usar o ponteiro de mídia, para remover o ícone nesse caso.

Testei este CSS, mais não consegui resolver:

 .menu-web__logo-icon-x {
    color: white;
    cursor: pointer;
    min-width: 28px;
    min-height: 28px;
    margin-left: auto;
    margin-right: 16px;
   }
 }

 @media (cursor: pointer) {
   .menu-web {
     .menu-web__logo-icon-x {
       display: none;
      }
     }
   }

Como posso criar uma media query para determinar se o usuário possui (ou não) mouse?

4
  • 2
    Você considera o touchpad um mouse? Se tiver um mouse conectado no dispositivo touch, qual o comportamento esperado? Commented 2/06/2021 às 14:28
  • Não estou considerando o fato de o usuário utilizar um mouse no touchpad, não pensei nesse comportamento caso use um mouse por exemplo no tablet. Commented 2/06/2021 às 14:34
  • Isso pode te ajudar pt.stackoverflow.com/questions/351537/…
    – hugocsl
    Commented 2/06/2021 às 15:16
  • Percebi que a media query pointer: fine, não funciona em navegadores mais antigos como o IE8. Existe alguma outra possibilidade que funcione com esse navegador em especifico? Commented 2/06/2021 às 17:09

1 Resposta 1

1

O media feature pointer permite que você faça uma query para determinar qual tipo de cursor o dispositivo do usuário possui.

De acordo com a documentação, três valores de teste são possíveis:

Valor de teste Descrição
none O mecanismo de input primário não inclui nenhum dispositivo para apontar.
coarse O dispositivo de input primário inclui um dispositivo para apontar com precisão limitada.
fine O dispositivo de input primário possui um dispositivo para apontar com boa precisão.

Desse modo, a sua media query pode utilizar o valor de teste none para determinar se o usuário encontra-se em um dispositivo móvel sem nenhum equipamento para apontar (como um mouse).

Exemplo:

/** Por padrão, assumiremos que o usuário possui um dispositivo para apontar. */
.no-pointing-device { display: none; }
.has-pointing-device { display: block; }

/** Media query para testar casos nos quais o usuário não tem dispositivo para apontar. */
@media (pointer: none) {
  .no-pointing-device { display: block; }
  .has-pointing-device { display: none; }
}
<h1 class="no-pointing-device">Você não tem mouse conectado</h1>
<h1 class="has-pointing-device">Você tem mouse conectado</h1>


O código da pergunta não funcionou porque a query cursor: pointer não é válida. Repare que o teste pointer não existe na tabela acima.

1
  • Obrigado pela ajuda, funcionou utilizando o valor pointer: fine! Commented 2/06/2021 às 16:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .