Member Avatar for VenusCrystal

Hi Folks,

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.

Can anyone please guide on this?

Thanks in Advance,
VenusCrystal

Edited by VenusCrystal
  • 2 Contributors
  • 1 Reply
  • 229 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by gentlemedia
Member Avatar for gentlemedia

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.

Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.