CSS on Mouse Down

Question

Usually I would use :hover, but I want my website to be accessible on touchscreen media too.

I know I can use :active, but as soon as I let go of the mouse button, it goes back to its inactive state.

Effectively I want:

Mouse Down : Div goes green

Mouse Up: Div stays green

Mouse Down: Div goes red

Mouse Up: Div stays red

Instead of:

Mouse Down: Div goes green

Mouse Up: Div goes red

Answer 1

Without relying on jQuery:

The :active pseudo-class is used to apply css to elements while they're being clicked upon.

.button {   color: red; } .button:active {   color: green; }