CSS Class Reverts to Not Active

I am adding a class to an image.

.bbbLink img { 
    outline: 1px solid #ddd;
    border-top: 1px solid #fff;
    padding: 10px;
    background: #f0f0f0;
}

On hover I add this,

.bbbLink img:hover { 
    background-color: rgba(0, 0, 0, 0.1);
    outline: 1px solid #ddd;
    border-top: 1px solid #fff;
    padding: 10px;
    background: #f0f0f0;
}

For active I am doing this,

.bbbLink img:active {
    outline: 1px solid #111 !important;
    border-top: 1px solid #555 !important;
    padding: 10px !important;
    background: #333 !important;
}

Since I am adding the active class to an image and you cannot do this because it is a self closing element I am using jquery to handle adding the active state like this,

<script>
(function($) {
$('.bbbLink').click(function() {
    $(this).toggleClass('active');
});
})( jQuery );
</script>

Everything works perfectly, even when checking the dom after clicking the element my active class appears.

<a id="wrapbbb" class="bbbLink active" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="img.jpg" target="_blank">
<img src="content/uploads/-2-018.jpg" alt="BBB">
</a>

The problem is that when I press the mouse down and click, active state shows and the styling takes effect but when I release the click the active state styling goes away...

The active class is still in the dom but the styling effects revert back to the class without the active state.

Why is this happening?

Er... You need to give CSS like this:

.bbbLink img.active {

When you have :active, it is a state, active / mousedown state, not a class. Hope this is not a typo.