2

I'm using :hover to show a make a menu opaque when the mouse hovers over - obviously this doesn't work for touch devices. This fiddle shows what I'm trying to achieve (scroll down to see the transparency). In my full example I'm using checkboxes to drop down the sub-menus, which is working great.

Obviously I can't traverse 'upwards' using CSS, so selecting a checkbox I can't affect the grandparent nav. Does anyone have any suggestions? Is there some sort of :active or equivalent that traverses up the DOM?

I'm not sure I'm making myself particularly clear, but any help would be appreciated. I suspect the only solution might be a jquery one?

Jamie
  • 323
  • 2
  • 12
  • Yes, you'd use javascript for this. (or ideally, don't design interactions that depend on hover) – DA. Apr 24 '13 at 21:02

2 Answers2

1

Use media queries to do something else for handheld devices;

@media handheld {
    /* .myHoverElement:active { }*/
}

You could try and look for some touch devices too that you specifically want to target. For example;

iPhone < 5:

@media handheld and (device-aspect-ratio: 2/3) {}

iPhone 5:

@media handheld and (device-aspect-ratio: 40/71) {}

iPad:

@media handheld and (device-aspect-ratio: 3/4) {}

As for the comment that cimmanon stated. StackOverflow has quite some info about it and how to target specific devices and maybe detect them better if handheld would not work on certain devices;

Do iPhone / Android browsers support CSS @media handheld?

Community
  • 1
  • 1
1

It's simpler to just avoid the opacity effect completely on mobile. That is, set opacity to 1 if the client is on a touch device.

imsky
  • 3,239
  • 17
  • 16
  • Stupidly simple! I've already got a `touch` class through modernizer. Why didn't I think of that! – Jamie Apr 24 '13 at 21:32