Emulate CSS active

by sanford

HTML

<a href="" id="useCSS" target="_test">Link using CSS pseudos</a>
<a href="" id="useDOM" target="_test">Link using DOM events</a>

CSS

A { display: block; margin-bottom: 20px; }
A:link { color: black }
A:visited { color: black }
A:hover { color: blue }

A:focus { color: red }
A:focus::after { content: " (focus)" }

A:active, A.fireactive { color: purple; }
A:active::after, A.fireactive::after { content: " (active)" }

A:focus:active { content: " (focus,active)" }

JavaScript

$$('A').addEvent('click',function(){return false;});

$('useDOM').addEvents( {
    'mousedown': function() { this.addClass('fireactive') },
    'mouseup': function() { this.removeClass('fireactive') },
    'mouseout': function() { this.removeClass('fireactive') }
});