How to disable :hover on ipad?

Question

iOS

I'm setting up a custom control in which you need to select the number of passengers. 4 people in a row, when you click on a person, it is added. When you hover, a plus sign / cross appears. The problem is that on the ipad hover is processed on click, so you have to click 2 times. I want to make it so that hover is ignored on the iPad and the click event occurs immediately.

Answer 1

1. Check for support for touch events
2. If it does, then use native events instead of mouse events (touchstart instead of click for example)

Answer 2

If I understand correctly, here is an example:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

There is also an option to use modernizr which will put down the classes (.touch for example), and :hover is already attached to the classes of non-touch devices.