0
189
ViewsButton Keeps :hover effect after being clicked on Mobile Screens
I have this scroll to top button that when it gets clicked on mobile screens, it keeps the color I've set for its hover effect and doesn't go back to the original one.
#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);
}
This is the initial color of the button:
And after it's clicked on Mobile Screens, it keeps its new color until I click somewhere on the screen:
This only happens on Touch Screens and not in Desktop since the hover effect is somehow taken as a focus on Touch Screens.
How can I avoid this and keep the original color after it's clicked?
·
Juan Pablo Isaza
2 answers
Answer question0
Try changing the color on hover only if the device has true hover functionality:
#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>
·
Juan Pablo Isaza
Report
0
Since this part of CSS Media Queries Level 4 has now been widely implemented since 2018, you can use this
@media (hover: hover) {
button:hover {
background-color: blue;
} }
·
Juan Pablo Isaza
Report
Answer question