How to implement hover effect on mobile devices?

Question

css

there is such a layout with a hover effect in the upper right block.
for this effect to work on a mobile device, an ontouchstart event has been added:

<div class="col-sm-4 col-sm-offset-8 flip-container" ontouchstart="this.classList.toggle('hover');">

The problem is that the effect only works in one direction only on the first tap, i.e. the text does not return back and it is useless to tap on the screen.
What is the problem - I could not find it, can someone tell me? the feeling that it does not work out the second and subsequent times toggle

Answer 1

Well, do another ontouchend
PS: that's the idea, with each tap the effect should change.

Answer 2

For mobile devices, the behavior of the element will have to be redone.