CODEWITHSUNDEEP
javascriptcsshover
Markgoessens
Markgoessens

Reputation: 21

How to un-hover an element on mobile

I have a drop down element which works great on desktop. http://www.c-testing.nl/werkenbijvanaarsen/growing-together/

But on mobile devices, the drop down won't collapse back when tapping again. I read some answers on this forum, but it doesn't seem to work in this case.

I'm trying to achieve this only with css, but the more I read about this, it seems that online javascript can achieve it.

Does anybody know how I can set something like an un-hover on this element?

.pl-drop_down:hover ul { opacity: 1; visibility: visible; }

Best regards, Mark

Upvotes: 2

Views: 3448

Answers (1)

Jordan Garvey
Jordan Garvey

Reputation: 345

It’s unlikely you’ll get what you want using just CSS :hover, as this wasn’t designed for touch screens.

To get it to collapse back on mobile, you could add the javascript:

$('[selector that you want to tap]').click(function() { $('.pl-drop_down').css({'pointer-events': 'none'}); });

This will remove the hover state on mobile and should make it collapse back, you’ll need jQuery for this solution to work though.

Upvotes: 3

Related Questions