I want to create a keypress listener that will only respond to the letter 'a'. When the 'a' key is pressed, I want the background color to change to transparent white and the border to become slightly grey.
Here's my code, but for some reason it's not working as expected. (Ignore the other CSS classes, they're just for text styling) Can someone help me figure out what I'm missing?
$( "#test" ).keypress(function( event ) {
//I believe 97 is the character code for 'a'
if(event.which == 97){
$(this).addClass('.test_card');
}else{
event.preventDefault();
}
});body{background: black;
}
.card{
background-color:transparent;
width:10%;
margin-left:1.25%;
height: 100%;
border: white solid 2px;
display:inline-block;
color: white;
}
.test_card{
background-color: rgba(255, 255, 255, .3);
border: grey solid 2px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="card" id="test">
<h1 class="card__title">A</h1>
<p class="card__description">
Snare
</p>
</div>
</body>