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 think this simple method can achieve this goal. With CSS you can turn off pointer event to 'none' then use jQuery to switch classes.

.item{
   pointer-events:none;
 }

.item.clicked{
   pointer-events:inherit;
 }
 
.item:hover,.item:active{
  /* Your Style On Hover Converted to Tap*/
  background:#000;
}

Use jQuery to switch classed:

jQuery('.item').click(function(e){
  e.preventDefault();
  $(this).addClass('clicked')l
});