disable hover image for tablet devices

Question

I have a dashboard-like layout with fields (symbaloo.com for example). The user can fill these fields with applications like facebook etc. When a field is clicked, the following pop up comes.

All of these fields have a hover effect for desktop users. When I click the X button on my tablet, the popup will dissapear as expected, but then the field below the X button will have a hover effect. This is not desired. I only want it to hover when a user has a mouse hovering over the field.

It's useful to note that this only happens in the browser Android 4.

What are my options?

Answer 1

As this is just happening on Android, I would suggest that you add some sort of validation checking if the UserAgent is from Android (from what I've read, a simple regex like so: /android/i works), if so, add a class/data-attribute to the body/html, and from there apply a selector.

Code example would be this:

if(/android/i.test(navigator.userAgent)) {
  $('html').attr('data-android-device', '');
}

Then on the CSS:

[data-android-device] .mybutton:hover {
  /* Reset properties */
}