Mouseover vs click on touch devices

[em...@oliverspencer.com]

Hi,

I'm building a simple Google Web Designer page where, on a PC, you can hover over an element, which then displays a picture and text via a group, then if you click, it will take you to another page.

However, on a mobile device, you can't hover (mouseover) so when you touch the element, you are immediately taken to the next page without the picture and text being displayed via the mouseover event. I've tried other events such as 'mousedown', but they all seem to be fired as soon as you tap oon a mobile device.

Is there any way to ensure that the first time the element is tapped on a mobile device, the group is displayed, then the second time it is tapped, the 'click' event is fired? Alternatively if this is difficult, it would be preferable for only the mouseover event to be fired on a mobile device rather than 'click'.

Thanks for any help!

[San Khong]

Have you checked out Touch > touchstart and touchend event to simulate hover on mobile device? Please give it a try and let us know if it works for you.

Thanks,

San

Google Web Designer team

[Kent]

You can also try this arrangement:

Create an exit action on the group which is initially set to visibility:hidden and on the top layer. Below this layer add a Tap Area component with two events, both use action CSS > Set styles to change visibility of the group. The first event is Mouse > Mouseover, and the second event is Tap Area > Touch/Click.

The behavior should now be: Desktop > mouseover to show the group, then click to exit. Mobile: tap to show the group, tap again to exit.

Hope that helps,

Kent

Google Web Designer team