How does the "Hover" event behave on "touch" devices?

Asked

Viewed 624 times

2

I’m developing a website to suit devices through Media Queries, however I wonder, how certain events behave on touch devices. For example, how does the "Hover" event behave on touch devices? And how to replace it or adapt it to touch devices ?

There are other similar events I must carefully review?

css events

  • From what I noticed on my sites :Hover behaves like :active on touchs devices.

  • For the little I’ve discovered so far, has browser that it activates the Hover only while the touch is activated but if you take off your finger it turns off... Can you imagine the fight, the customer want to buy I want to spend, but I can’t access this link... hehe... But vlw the interest...

1 answer

2


The Hover, on touch device, works as click. In the Chrome developer tool (F12) you can see how it works.

To better adapt to touch device you can use the modernize and load style sheet according to experience:

if (Modernizr.touch){
   // Ação se for dispositivo touch
} else {
   // Ação sem dispositivo touch
}

Or for a more immediate solution you can use media query

@media screen and (max-width 768px)
   /* CSS em dispositivos mobile */

The 768px resolution is standard mobile device. The great detail is that customizing with CSS, if the user resize the browser he will navigate with the mouse a navigation optimized for touch.

  • So the problem is that I read that on certain devices, if the guy takes his finger off it disappears... like a same Hover, but I wanted to see how I can make the element to be Hover and click... I don’t know if you understand.....

  • You can use media query to maintain the style of click when it is on device less than 768px (mobile default)

  • I think I will prefer the solution with media query...vlw

Browser other questions tagged css events

You are not signed in. Login or sign up in order to post.