[Resolved] Hover on Mobile 2

[David]

Hi Tom,

another one of those curve ball questions. Revisiting mobile hover events this time on any old DIV. I can use the cursor: pointer; property and the iOS then recognises it, which is cool. However reading around stack and cssTricks a lot of recommendations is to use jQuery to add a touch listener event for mobile particularly for Nav menus. Which led me to thinking that must be in GP, a quick scour of GitHub and yes.

So mad question of the day, is their anyway of repurposing this listener for other non nav items? Presumably with an explicit class name or something?

Any thoughts?

David

[Tom]

You can build an event listener in javascript for any kind of element.

For example:

document.querySelector( '.element' ).addEventListener( 'touchstart', function() {
    // Do stuff in here
} );

Is that what you’re looking for?

[David]

Hi Tom, thanks as usual for the assist. Yes and no.
I suppose i was looking for a shortcut.
So i have a set of CSS hover events which don’t work on iOS unless i use the hacky cursor: pointer trick and then it’s only a one way thing, each hover doesn’t release until another is triggered – when ideally a second touch should release the hover.
Is there (humour me) a global trick that detects any element:hover has been touched on mobile and then activates the hover properties accordingly? Or do i have to replicate each CSS in a JS event listener?

Sorry probably not making much sense! And i assume if it could be done it would be a plugin or such not to get round the way iOS deals with this.

[Tom]

Not that I know of unfortunately. Have you tried asking on a site like stackoverflow? That’s where I go for strange questions like this – more people see it and you typically get a pretty straightforward yes or no answer.

[David]

That’s my next port of call! Thank’s Tom – i’ll put the strange requests to bed for now!
Much appreciated as always.

[Author]

Posts