Background color change when screen is tapped

Question

I want to change the background color of particular div when touch it. I have used

.x-list-item:active {


background: #870000 !important; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #870000 , #190A05) !important; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #870000 , #190A05) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}

above code. But when I touch the dive and pull it off, the background color still remain. after that I have used this property as this.

-webkit-tap-highlight-color

 .x-list-item {

    -webkit-tap-highlight-color: #870000 !important;
    -webkit-tap-highlight-color: -webkit-linear-gradient(to left, #870000 , #190A05) !important; 
    -webkit-tap-highlight-color: linear-gradient(to left, #870000 , #190A05) !important; 


    }

But the style not apply. It means at lease not change the div color. Why is that? what is the solution?

Answer 1

if you already have jquery library, try to use this. This will change the background of .x-list-item when clicked.

 $('.x-list-item').on('click', function(){
      $('.x-list-item').css({background: 'red'});
    });