Stack Exchange Inbox Reputation and Badges
3,443 31230
review help
up vote 5 down vote favorite
2

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.

share|edit|close|delete|flag
   upvote
  flag
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, stackoverflow.com/questions/17233804/…. –  Josh Powell Oct 31 '13 at 18:26
   upvote
  flag
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
   upvote
  flag
I added another answer to the question @JoshPowell linked: stackoverflow.com/a/19715406/453277. JavaScript is required (not sure there's an alternative). –  Tim Medora Oct 31 '13 at 19:51
add comment

1 Answer

up vote 1 down vote unaccept

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.

share|edit|delete|flag
1
up voted
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 at 0:05
    
@DA. Partially broken? –  bjb568 Feb 14 at 0:08  
   upvote
  flag
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 at 0:12
    
@DA. It could be emulated. And I would consider that to be a fix. Anyway, feel free to edit. –  bjb568 Feb 14 at 0:14  
   upvote
  flag
Oh, I don't think it needs editing. It certainly gets the point across. Just trying to add some context. –  DA. Feb 14 at 0:24
add / show 1 more comment

Your Answer

 
discard

Would you like to have responses to your questions sent to you via email?