hover event on touch device

Question

I decrease opacity of <ul> when mouse over the <ul> tag area and then set full opacity for <li> which user is on that.

like this sample: Image change opacity on hover without jQuery

now, the problem is in tablet and phones, because on touch devices we don't have hover event and user should click (touch) on <li> so all another <li> will decrease the opacity and user cannot unselect (unhover) that <li> so they should refresh the page.

How can I solve this problem?

Answer 1

Since :hover is of course not supported in touch only browsers, you can use the touchStart, touchMove, and touchEnd events (through javascript). These are used very well in the FastClick library.

Also some CSS :hover events can be activated through a touch only browser if you hold your finger on the screen.

Answer 2

On touch devices, hover is not supported. You can either:

• skip hover effects in touch device stylesheets
• use JavaScript to turn hover into click interactions
• use JavaScript to simulate hover interactions on the touch device

There are multiple other posts on SO that discuss about this problem:

How do I simulate a hover with a touch in touch enabled browsers?
how to deal with hover effect on touch devices
Hover for Touch Devices

Answer 3

A bit late...

but you could use css animations to show the menu for 4-5 seconds before hiding it again...

not perfect but you get rid of the JS .. not that js is wrong, i use angularJS..

EDIT: -- were asked to ref hers a link http://www.greywyvern.com/?post=337