Is there a way to remove the background color that was applied to a previously clicked button when clicking on another button? The current code successfully changes the background color of the clicked button upon hover, but it doesn't reset or remove the styles when switching to another button.
$("button").each(function(){
var $this = $(this);
$this.click(function(e) {
e.preventDefault();
var color = $this.css('background-color');
$this.css({'background-color': color, 'color': '#ffffff'});
})
});.btn {
border: 2px solid black;
background-color: white;
color: black;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
.success {
border-color: #04AA6D;
color: green;
}
.success:hover {
background-color: #04AA6D;
color: white;
}
.info {
border-color: #2196F3;
color: dodgerblue;
}
.info:hover {
background: #2196F3;
color: white;
}
.warning {
border-color: #ff9800;
color: orange;
}
.warning:hover {
background: #ff9800;
color: white;
}
.danger {
border-color: #f44336;
color: red;
}
.danger:hover {
background: #f44336;
color: white;
}
.default {
border-color: #e7e7e7;
color: black;
}
.default:hover {
background: #e7e7e7;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button class="btn success">Test</button>
<button class="btn info">Test 1</button>
<button class="btn warning">Test 2</button>
<button class="btn danger">Test 3</button>
<button class="btn default">Test 4</button>
</body>
</html>