Reputation: 21
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
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