I am encountering an issue with CSS and jQuery. I have two buttons and I would like to change the background color of the button that is clicked to blue using the 'active' CSS property. However, it seems to not be working as intended. The problem arises when the button is no longer active, causing it to lose its background color. Below is the code snippet: HTML:
<div id='hey'>
<div class='b' id='b1' href="#">Button One</div>
<div class='b' id='b2' href="#">Button Two</div>
</div>
CSS:
body,html {
font: bold 14px/1.4 'Open Sans', arial, sans-serif;
background: #000;
}
#hey {
margin: 150px auto 0;
padding: 0;
list-style: none;
display: table;
width: 600px;
text-align: center;
}
.b {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
.b:active {
background-color: blue;
}
JS:
$(".b").click(function() {
$(this).addClass('active');
});