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
  • 242 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

Short answer: iPad/Safari is treating your CSS :hover as an input state — the first tap triggers the hover change and a second tap fires the click. is correct that hover is not a touch gesture; the robust approach is to stop depending on :hover for essential navigation and make the tab switch explicit on click/touch.

A CSS-first fix is to only apply hover styles on devices that actually support hovering. Put your hover rules inside a media query that requires hover and a fine pointer:

@media (hover: hover) and (pointer: fine) {
  .tablabel:hover {
    /* hover-image swap rules here */
  }
}

That keeps hover on desktops and removes it on most touch devices. If you prefer to explicitly neutralize hover on touch-capable pointers, use the inverse query (hover: none), (pointer: coarse).

As a fallback, detect touch at runtime and disable hover styles or switch behavior to class-based toggles. Example pattern (vanilla JS + CSS):

(function(){
  function onFirstTouch(){
    document.documentElement.classList.add('is-touch');
    window.removeEventListener('touchstart', onFirstTouch, false);
  }
  window.addEventListener('touchstart', onFirstTouch, false);
})();
.is-touch .tablabel:hover { /* no-op or reset to default */ }

And wire your tab activation to click/touch (or pointer) events so a single tap activates the tab instead of relying on :hover.

Notes and gotchas: some iPads in "desktop" mode can misreport pointer/hover characteristics, and UA sniffing is brittle — prefer the media-query + runtime touch-detection combo. Avoid hiding critical controls only on :hover; instead toggle an .active class on click so the UI works for keyboard, mouse, and touch. Also test on real devices (or a Safari device simulator) to confirm behavior.

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.