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?
pointer: fine
, não funciona em navegadores mais antigos como o IE8. Existe alguma outra possibilidade que funcione com esse navegador em especifico?