To force ignore the css hover effect only in iPad

I have a tabset created using jquery. Each tablabel is an image. On hovering over the images, it changes to another image and on click of any image the corresponding tab contents are shown.

This hover effect works absolutely fine on windows desktop. But when I test this on iPad, on first touch the image is changed and on the second touch the corresponding tab contents are shown. Instead of two taps/touch to open the tab content, I want to nullify hover effect when its a touch device i.e. on single touch it should open the corresponding tab contents.

How can I achieve this?

On analysing further I got it that this happens when hover is used with css 'display' and 'visibility' properties only.

That's just how it works I'm afraid. Hover is not a gesture for touch screen devices, so it will become a 'click'.

There is also unfortunately not a 100% reliable way of detecting if a device is a touch or a non-touch device. Especislly with the fast rise of PC's that can be used with a traditional mouse, but also can de used as touchscreen device.

I've used in the past Modernizr to detect if the device is touch and then I would create a fallback solution and left out the hover effect. That doesn't help much anymore these days, so it's important to not hide critical content behind a hover effect. Mu advice is to use it to enhance the user experience on non-touch devices. but so that it doesn't interfere in a bad way the user experience on touch screens.