Changing :hover to touch/click for mobile devices

Question

I\'ve had a look around but can\'t quite find what i\'m looking for.

I currently have a css animation on my page which is triggered by :hover. I would like this to c

Answer 1

I am a CSS noob but I have noticed that hover will work for touch screens so long as it's a "hoverable" element: image, link, button. You can do it all with CSS using the following trick.

Change your div background to an actual image tag within the div or create a dummy link around the entire div, it will then register as a hover when you touch the image.

Doing this will mean that you need the rest of your page to also be "hoverable" so when you touch outside of the image it recognizes that info-slide:hover has ended. My trick is to make all of my other content dummy links.

It's not very elegant but it works.