How to remove or restrict :hover in mobile devices

How to remove or restrict :hover in mobile devices.

Welcome to the forums, @javedgamexs.

“Hover” is a mouse function, and therefore does not work on mobile devices, so I’m a bit confused by your question. Could you explain in a bit more detail what you’re trying to achieve?

I have multiple buttons with the same class name. In desktop when I hover on buttons so background colour and border colour change. in mobile when I select and deselect button background colour and border colour still remaining until I didn’t select another one. It happens due to because of :hover.

What I want to do when in mobile or touch devices click on button so there background colour and border colour change. and again, I deselect. so both colour and background colour removed by selecting another button.

1 Like

Hi,

One way to do this is to to use a special class to do the hover and then change this class to something else if it is a touch device.

This example uses jquery but I’m sure one of the JS experts could convert it to raw js.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.