<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")
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.