How to implement hover effect for touch (mobile) devices?

Question

css

Hello!

The essence of the problem is in the "sticking" of buttons with hover effects on mobile, how can you implement this so that the color changes only when you click on the button or div and immediately returns to its original position.

Link to buttons: https://jsfiddle.net/vvs10/pL14gfwa/1/

Answer 1

I solved the problem with touch screens with the following code:

document.querySelector('.pleer-controls__right').addEventListener("touchstart", myTouch);
document.querySelector('.pleer-controls__right').addEventListener("touchend", myTouchEnd);

function myTouch(){
  $(this).toggleClass('clicked');
}

function myTouchEnd(){
  $(this).removeClass('clicked');
}

Answer 2

https://habr.com/ru/post/213801/