qwiq.ly

HTML

<ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>

<input type="submit" /><input type="reset" />
<textarea></textarea>
<fieldset>
      <legend>Legend</legend>
      <input type="radio" value="radio1"/>
      <label for="radio1">Label 1</label>
      <input type="radio" value="radio2"/>
      <label for="radio2">Label 2</label>
  </fieldset>

CSS

*.hover {border: red 3px solid}
*.active {border: blue 3px solid}

*.first {border-top: gray 1px dotted}
*.last {border-bottom: gray 1px dotted}

*.even {background: #CCC}
*.odd {background: #EEE}

.typing {background: #36c;}

JavaScript

$(document).ready(function() {
    $('*').mouseover(function(){$(this).addClass('hover');});
    $('*').mouseout(function(){$('.hover').removeClass('hover');});
    
    $('*').mousedown(function(){$(this).addClass('active');});
    $('*').mouseup(function(){$('.active').removeClass('active');});
    
    var timer;
    function refreshPress(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            $('.typing').removeClass('typing');
        }, 1500); //0.5 seconds
    }
    $('html').keypress(function(){
        $(this).addClass('typing');
        refreshPress();
    });
    
    
    /*$('*').parent().children().first().addClass('first');
    $('*').parent().children().last().addClass('last');
    
    $('*').filter(':even').addClass('even');
    $('*').filter(':odd').addClass('odd');*/
    
    $('input').addClass('input').addClass('form-element');
    $(':radio').addClass('radio');
    $(':submit').addClass('submit');
    $(':reset').addClass('reset');
    
    $('textarea').addClass('textarea').addClass('form-element');
    $('fieldset').addClass('fieldset').addClass('form-element');
    $('legend').addClass('legend').addClass('form-element');
    
    $('label').addClass('label').addClass('form-element');
});