One of my tasks involves adding a new class to an image.
.bbbLink img {
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
When hovering over the image, I apply the following styles,
.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 the active state, I have configured these properties,
.bbbLink img:active {
outline: 1px solid #111 !important;
border-top: 1px solid #555 !important;
padding: 10px !important;
background: #333 !important;
}
Due to the limitation of adding classes to self-closing elements like images, I am using jQuery to toggle the active class when clicking on it as shown below,
<script>
(function($) {
$('.bbbLink').click(function() {
$(this).toggleClass('active');
});
})( jQuery );
</script>
Although everything seems to be working correctly and the active class is added to the DOM after clicking, there is one issue that arises.
<a id="wrapbbb" class="bbbLink active" href="img.jpg" target="_blank">
<img src="content/uploads/-2-018.jpg" alt="BBB">
</a>
The problem occurs when I press down the mouse button to activate the active state, but upon releasing the click, the styling reverts back to its original state despite the active class still being present in the DOM.
This inconsistency raises the question - why does this happen?