5

I have a simple menu with a hover state:

<nav id="menu">
    <div><a href="#">Home</a></div>
    <div>
        <a href="#">1</a>
        <nav>
            <div><a href="#">1.1</a></div>
            <div><a href="#">1.2</a></div>
            <div><a href="#">1.3</a></div>
        </nav>
    </div>
</nav>

CSS:

#menu > div > nav {
    display: none;
    position: absolute;
    z-index: 9999;
}
#menu > div:hover > nav {
    display: block;
}

But the :hover state never ends. After another tap (somewhere else) :hover still stays. Can I get around this without javascript? (Fiddle)

It seems like the only way to get rid of :hover is to :focus somewhere (element.focus()) or hover on something else.

bjb568
  • 11,089
  • 11
  • 50
  • 71
  • Hover states are broken on mobile devices simply because you can't hover over an element. The cool thing about this is they act more like a button then anything. Here is a solution you could utilize, http://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices. – Josh Powell Oct 31 '13 at 18:26
  • Dude. Try inline-block, inherit and compact. Maybe that will help you. I don't know the real problem but I just hint. IOS is a trouble for web designers. – Mr. Zoidberg Oct 31 '13 at 18:50
  • I added another answer to the question @JoshPowell linked: http://stackoverflow.com/a/19715406/453277. JavaScript is required (not sure there's an alternative). – Tim M. Oct 31 '13 at 19:51

2 Answers2

1

No. Hover states are partially broken on some mobile devices simply because you can't hover over an element. You will have to use javascript.

bjb568
  • 11,089
  • 11
  • 50
  • 71
  • 1
    I wouldn't say they are 'broken' but simply that there is no such thing as hover on a touch device (and, as such, different devices do different things to workaround developers who are depending on hover states). – DA. Feb 14 '14 at 00:05
  • @DA. Partially broken? – bjb568 Feb 14 '14 at 00:08
  • Well, perhaps we're just arguing semantics, but I'd say that hover simply doesn't exist on mobile. It's not that it's broken, but rather that it doesn't exist. To say it's broken somewhat implies that it may be fixed at some point--which is not the case on a touch device. – DA. Feb 14 '14 at 00:12
  • @DA. It could be emulated. And I would consider that to be a fix. Anyway, feel free to edit. – bjb568 Feb 14 '14 at 00:14
  • Oh, I don't think it needs editing. It certainly gets the point across. Just trying to add some context. – DA. Feb 14 '14 at 00:24
1

You can use the hover media query to disable hover states on iOS: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

Ben Schoepke
  • 789
  • 2
  • 7
  • 17