♿️ fix: footer icons hover fixed for mobile

[kevind13]

Descripción

Se ha removido el hover en los iconos del footer para dispositivos touch usando any-hover.

Problema solucionado

Cuando se tiene un dispositivo que no tiene mouse si no touch, el hover no funciona muy bien ya que queda en estado hover hasta que presionas otro elemento o otra parte de la pantalla.

Como primera impresión de la pagina decidí cambiar el modo oscuro y ví que el icono quedaba mas grande que los demás mientras scrolleaba y esto da un poco de TOC.

Comprobación de cambios

• He revisado localmente los cambios para asegurarme de que no haya errores ni problemas.
• He probado estos cambios en múltiples dispositivos y navegadores para asegurarme de que la landing page se vea y funcione correctamente.
• He actualizado la documentación, si corresponde.

Impacto potencial

None

Contexto adicional

None

Enlaces útiles

https://caniuse.com/css-media-interaction

Mini video del icono en estado hover.

2024-02-23.21-48-34.mov

Solución:

2024-02-23.21-47-20.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
la-velada-web-oficial	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 25, 2024 2:59pm

[felixicaza]

@kevind13 Para eso es mejor práctica utilizar las Interaction Media Features, que son Media Queries que detectan si un dispositivo es táctil o no. Ya que lo que haces es desactivar el hover en dimensiones menores al prefijo md: pero no en los demás dispositivos táctiles.

En Tailwind puedes utilizarlo creando un plugin personalizado como este (ejemplo utilizando la media query any-hover):

// ...
plugins: [
    function ({ addVariant }) {
      addVariant('any-hover', '@media (any-hover: hover) { &:hover }')
    }
  ]
// ...

Y en el HTML solamente haces algo como esto:

<button class="bg-indigo-500 any-hover:bg-indigo-800 active:bg-indigo-800 px-4 py-2 rounded text-white transition-colors">
  Botón
</button>

Te dejo un enlace en el Playground Tailwind para que veas como funciona (especialmente en dispositivos táctiles): https://play.tailwindcss.com/k83fss7iOX

---

Edit:

Adjunto soporte en Caniuse: https://caniuse.com/css-media-interaction

[carlosfernandezcabrero]

Buenas 👋,

¿Que te parecería subir los cambios sin modificar el formato del resto del código? Creo que es muy interesante lo que propones y seria mas fácil focalizarse en la nueva funcionalidad si dejas el formato del resto de código igual que estaba.

Solo es una sugerencia, me gusta mucho lo que aporta tu PR 🙌

[github-actions]

⚠️ Esta Pull Request tiene conflictos. Por favor, resuelvelos antes de que podamos evaluar los cambios.

[github-actions]

✅ ¡Los conflictos han sido resuletos! Un colaborador revisará pronto la Pull Request.

[kevind13]

@kevind13 Para eso es mejor práctica utilizar las Interaction Media Features, que son Media Queries que detectan si un dispositivo es táctil o no. Ya que lo que haces es desactivar el hover en dimensiones menores al prefijo md: pero no en los demás dispositivos táctiles.

En Tailwind puedes utilizarlo creando un plugin personalizado como este (ejemplo utilizando la media query any-hover):

// ...
plugins: [
    function ({ addVariant }) {
      addVariant('any-hover', '@media (any-hover: hover) { &:hover }')
    }
  ]
// ...

Y en el HTML solamente haces algo como esto:

<button class="bg-indigo-500 any-hover:bg-indigo-800 active:bg-indigo-800 px-4 py-2 rounded text-white transition-colors">
  Botón
</button>

Te dejo un enlace en el Playground Tailwind para que veas como funciona (especialmente en dispositivos táctiles): https://play.tailwindcss.com/k83fss7iOX

Edit:

Adjunto soporte en Caniuse: https://caniuse.com/css-media-interaction

Muchas gracias por este comentario, la verdad no lo sabía y es muy util. Es un problema que siempre he tenido y ahora lo solucionaré con tu método 👍