CODEWITHSUNDEEP
javascriptcss
Hide
Hide

Reputation: 3317

Mobile devices touch event with css

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.

Upvotes: 1

Views: 666

Answers (1)

Ashwin
Ashwin

Reputation: 211

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>

Upvotes: 1

Related Questions