<div id="mouse">
#mouse {
width: 100%;
height: 200px;
background-color: #f60;
}
.pressed {
background-color: red !important;
}
.unpressed {
background-color: silver !important;
}
const element = document.querySelector("#mouse")
element.addEventListener("mousedown", event => {
element.classList.remove("unpressed")
element.classList.add("pressed")
})
element.addEventListener("mouseup", event => {
element.classList.remove("pressed")
element.classList.add("unpressed")
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.