CODEWITHSUNDEEP
htmlioscssiphone
turtile
turtile

Reputation: 55

iPhone/iOS/Safari won't change display:none to display:block using :hover

I'm working on a responsive design that has fixed layers to keep the heading floating on the top of the page. The menu and other information should show when hovering using the :hover and the element - so the display changes from none to block.

Does anyone know why Safari won't work correctly on iPhone? I've tested on ever other device/browser I have access to without any problems. Is there any other work around? Maybe the use of Javascript?

The link is: http://www.surfbagel.com/new/master.htm

Thank you for your time and help!

John

Upvotes: 1

Views: 1814

Answers (3)

Jabel Márquez
Jabel Márquez

Reputation: 762

In a mobile device you don't have a :hover. The hover concept doesn't exist. Thats why in iPhone doesn't work.

Upvotes: 0

David T
David T

Reputation: 133

You can't hover with an iPhone. You can try using :active instead of :hover.

In your case: For the menu, you'll have to add a class to the menu and change the class with Javascript from active to non-active, where the css of this class will change it from being display:none to display: block

Upvotes: 1

drdan
drdan

Reputation: 161

The issue here is that mobile Safari has no concept of a hover. If you think about it, how can you hover with a touch device ? With a mouse it's easy as you are not committing a click when you move your mouse around, but with Touch you are committing an action as soon as you touch the screen.

Upvotes: 1

Related Questions