Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Aurelien Roux
Aurelien Roux
25,567 Points

Hover problem with links on Ipad and Iphone

Hi everyone, I'm currently working on a website for a friend and I have a problem I don't understand.

here is the site http://fikasfest.com/index.html

on desktop everything looks great, but on the Ipad/Iphone, you have to click 2 times on the links to go to the next page. seems like the first click activate the hover state on the link... and second click activate the link!

Does anyone know what the problem is here ?

Thanks

2 Answers

Tyler Herbst
Tyler Herbst
11,763 Points
Tyler Herbst
Tyler Herbst
11,763 Points

This is typical on websites that don't use "responsive web design." iOS does this so you don't miss any important content, like a menu or description that pops up. The first tap is your hover and the second tap is the click. There are a few different ways to disable this while keeping the hover action on desktops, but I would take Nick Pettit's course on Responsive Layouts since it looks like your site doesn't adjust to the width of the browser either. Hope that helps!

Aurelien Roux
Aurelien Roux
25,567 Points
Aurelien Roux
Aurelien Roux
25,567 Points

Thanks on the info for Nick's course on responsive layouts! That's the next I'll be watching

like you said, it seems it only happens on IOS. I found an article about this https://www.powderkegwebdesign.com/ever-wonder-links-mobile-browsers-require-click-twice/ solution should to disable the :hover effect with a media querie.

thanks again!