Mobile devices touch event with css

Question

I have made a simple card system with mobile.

When I use below code, touch event detect very well.

 html, body { margin: 0; padding: 0; } .card1 { height: 200px; width: 200px; background-color: green; } .card1:active { background-color: blue; }

 <html> <body ontouchstart=""> <div class="wrap"> <div class="card1"></div> </div> </body> </html>

Not only in mobile devices but also works fine in the desktop.

But after detach the finger from the screen, it return to original state.

My goal is if I click touch the box, box will be changed to background-color: blue; and do not have to return background-color: green;

Is there any solution here?

Thanks.

Answer 1

It can be achieved by applying background color on click event using js

 $('.card1').click(function() { $('.card1').css({ 'background-color': 'blue', }); });

 html, body { margin: 0; padding: 0; } .card1 { height: 200px; width: 200px; background-color: green; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body ontouchstart=""> <div class="wrap"> <div class="card1"></div> </div> </body> </html>

Mobile devices touch event with css

Question

1 answers

solution1
1 ACCPTED 2018-10-30 09:57:05

Mobile devices touch event with css

Question

1 answers

solution1 1 ACCPTED 2018-10-30 09:57:05

solution1
1 ACCPTED 2018-10-30 09:57:05