hover event on touch device

Question

I decrease opacity of

when mouse over the
tag area and then set full opacity for
• which user is on that.

Answer 1

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 2

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 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