How do you get rid of a random "pressed" class popping up on <div> click?

Question

I currently have a div that I am trying to make into a like button that when clicked it switches to another image and back again when clicked again.....

With that I am having a problem where every time I click the div image it adds a class called "pressed" and the 2nd image only stays until I lift my finger off of the left-click.

I am using phonegap and and Intel mobile framework to help with the html, css, and javascript.

Is there anyway to disable this function from popping up on click or is there anything I can do to make the 2 images swap on click with a much easier method?

Thanks for the help. I am a little new at this.

HTML

<td align="right">
   <div class="like_button"></div>
</td>

CSS

    .like_button {
    background-color: transparent;
    border-color: transparent;
    border:0px;
    background-image: url(../img/like_button.png);
    background-size: 52px 52px;
    height: 52px;
    width: 52px;
}

    .like_button:active {
    background-image: url(../img/liked_button.png);
    background-size: 52px 52px;
    height: 52px;
    width: 52px;
}

JAVASCRIPT

jQuery('like_button').click(function(){
   jQuery(this).toggleClass('active');
});

Answer 1

Like what lmgonzalves said in the comments, I think the problem has to do with the :active pseudo selector which is mostly used to alter an element's state while it is being activated (being clicked on or otherwise activated), hence the split second effect you are experiencing when you lift your finger away.

Instead, you should remove the pseudo selector and use a simple class selector like .like_button.clicked in handling state changes CSS.

You can see the demo here: https://jsfiddle.net/k135g025/

Hope this helps!