Me gustaría proporcionar un comportamiento separado para los navegadores que admiten el desplazamiento (por ejemplo, los navegadores de escritorio) y los que no lo hacen (por ejemplo, dispositivos con pantalla táctil). Específicamente, quiero declarar un estado de desplazamiento en los navegadores que lo admiten, pero no para los navegadores que no lo hacen, para evitar que los navegadores móviles lo emulen con toques adicionales, ya que esto rompe otras interacciones en la página, al no definir un desplazamiento. estado para esos navegadores esto se evita.

He leído sobre elConsultas de medios de interacción característica y parece que debería hacer el truco. Podría hacer algo como:

@media (hover: none) {
  /* behaviour for touch browsers */
}

De acuerdo aPuedo usar Está disponible en todos los navegadores que necesito admitir, excepto IE11 y Firefox.

Entonces me pregunté si podría hacerlo al revés, ya que todos los dispositivos táctiles principales lo admiten, luego lo niegan:

@media not (hover: none) {
  /* behaviour for desktop browsers */
}

Sin embargo, esto no parece funcionar en absoluto.

Ejemplo de pseudocódigo de lo que estoy tratando de hacer:

.myelement {
  /* some styling */
  /* note: no hover state here */
}
@media(this device supports hover) {
  .myelement:hover {
    /* more styling */
  }
}

Entonces, ¿hay alguna manera de hacer que esto funcione de la manera prevista, o estoy siguiendo el camino equivocado?