Menu
I'm trying to figure out a way to simulate a hover effect for mobile devices. I've searched around but none seem to work.
The element i'm trying to get to have a mobile hover effect is a link that changes color on hover.
805
Hover effects inform users what they can interact with by providing visual feedback on buttons. But there's a problem — hover effects are for desktop apps, not mobile apps. There are no mouse devices on mobile, so users don't have the luxury of using hover effects.
To answer your main question: “How do I simulate a hover with a touch in touch enabled browsers?” Simply allow 'clicking' the element (by tapping the screen), and then trigger the hover event using JavaScript. var p = document.
Add a secondary menu The first press simulates the hover of a mouse and the second press simulates the user taking the primary action. This is a neat alternative to hover effects but is constrained by screen size and limits the amount of information you can add to your effect.
Mobile devices use touch screen, which reacts only to touch, so there is no hover. Systems vary, on some a first touch is considered a hover and the second a click, but on many a touch is a click. You cannot rely on hover for mobile devices.
Good point it may well have a lot to do with the actual phone you are testing on. I usually test with android which seems to cater for long-press and slide-off (so there is no onMouseUp event) by triggering the :hover or :focus state.
It really begs the question though, if a user is really unlikely to trigger this state, is it worth designing for? :Hover is designed for desktop use with a mouse, replicating these interactions on mobile seems counter-productive.
That said, if you are trying to achieve some really interesting interaction for mobile, because it is hard to trigger a hover state without triggering the onMouseUp event, you may be better using elements that do not have links attached to allow clicks without triggering a link.
jQuery has event.preventDefault() which may help for other needs.
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
