Hover/Touch/Active

HTML

<div class="element"></div>

CSS

.element {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    
    border: black 2px solid;
}

.element.hover {background: red}
.element.touch {background: green}
.element.active {background: blue}

CoffeeScript

$(document).ready(function() {
// MOUSE
    $('*').mouseover(function() {$(this).addClass('hover');});
    $('*').mouseout(function() {$('.hover').removeClass('hover');});
    
    $('*').mousedown(function() {$(this).addClass('active');});
    $('*').mouseup(function() {$('.active').removeClass('active');});
    
// TOUCH
    // On touch down wait (100ms) > add class touch
    // On touch move > remove class touch
    
    // On touch up > add class active
});