0
205
ViewsEl botón mantiene: efecto de desplazamiento después de hacer clic en las pantallas móviles
Tengo este botón de desplazamiento hacia arriba que cuando se hace clic en las pantallas móviles, mantiene el color que configuré para su efecto de desplazamiento y no vuelve al original.
#back-to-top { background: none; background-repeat: no-repeat; border: none; cursor: pointer; overflow: hidden; outline: none; position: fixed; bottom: 30px; right: 20px; color: rgb(255, 51, 0); z-index: 99; font-size: 2.5rem; } #back-to-top:hover { color: rgb(255, 0, 140); }Este es el color inicial del botón:
Y después de hacer clic en Pantallas móviles, mantiene su nuevo color hasta que hago clic en algún lugar de la pantalla:
Esto solo sucede en las pantallas táctiles y no en el escritorio, ya que el efecto de desplazamiento se toma de alguna manera como un foco en las pantallas táctiles.
¿Cómo puedo evitar esto y mantener el color original después de hacer clic?
2 answers
Answer question0
Intente cambiar el color al pasar el mouse solo si el dispositivo tiene una verdadera funcionalidad de desplazamiento:
#back-to-top { background: none; background-repeat: no-repeat; border: none; cursor: pointer; overflow: hidden; outline: none; position: fixed; bottom: 30px; right: 20px; color: rgb(255, 51, 0); z-index: 99; font-size: 2.5rem; } @media (hover: hover) { #back-to-top:hover { color: rgb(255, 0, 140); } } <button id="back-to-top">Top</button>0
Dado que esta parte de CSS Media Queries Level 4 ahora se implementó ampliamente desde 2018, puede usar esto
@media (hover: hover) { button:hover { background-color: blue; } }