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

Arian Popalyar
Arian Popalyar
4,962 Points
Posted by Arian Popalyar
Arian Popalyar
4,962 Points

hover effect on touch devices

Hi, I want to add the hover effect on the touch devices such as ipad i don't know shall i use jquery or is there any simple css that will deal with it i tried

//test for touch events support and if not supported, attach .no-touch class to the HTML tag.

if (!("ontouchstart" in document.documentElement)) { document.documentElement.className += " no-touch"; } .main-menu ul, .filters ul { position: absolute; display:none; top: 1.5em; left: -40px; width: 15em; /* left offset of submenus need to match (see below) */ } .main-menu li:hover ul, .filters li:hover ul{ z-index: 99; display: block; } .no-touch .main-menu li:hover ul, .no-touch .filters li:hover ul{ z-index: 99; display: block; } and i have also tried the .main-menu li:focus ul, .filters li:focus ul{ z-index: 99; display: block; }

nothing worked

5 Answers

Mark Shaw
Mark Shaw
10,449 Points
Mark Shaw
Mark Shaw
10,449 Points

I would change the hover to a click event when the screen is smaller than, say, 769px or so. That will require a bit of javascript. So the user clicks or taps the element to expand the menu.

Paul Bentham
Paul Bentham
24,090 Points
Paul Bentham
Paul Bentham
24,090 Points

You can't hover on an iPad, the browser would never know if you were hovering your finger over the screen.

Arian Popalyar
Arian Popalyar
4,962 Points
Arian Popalyar
Arian Popalyar
4,962 Points

how do i add my effect on ipad then ? or what should i do with all my effects on the touch devices

Mark Shaw
Mark Shaw
10,449 Points
Mark Shaw
Mark Shaw
10,449 Points

You won't be able to use the hover effect on touch devices. You can still use it in large screen settings and use media queries to change the functionality in smaller devices where a touch screen is in use. If I could see your code I could make some suggestions .

Arian Popalyar
Arian Popalyar
4,962 Points
Arian Popalyar
Arian Popalyar
4,962 Points

hi mark here is the link to the site http://arianp.com/sta/adam2.html in tablet u can see the hover effect with u tab the li and switch between them etc

Arian Popalyar
Arian Popalyar
4,962 Points
Arian Popalyar
Arian Popalyar
4,962 Points

Hi Mark thanks for your suggestion i have fixed the code now it works ok on i pad too