Here are the demos for my blog post. To see get the source, just use the View Source feature of your browser. Have fun.

Back to the blog post

1. The CSS Example

This needs a simeple CSS hover definition:
li.CssExample:hover
It does not work in IE6, but Internet Explorer 6 still has like over 60% market share. So it might be worth the effort to do something about it.

CSS Demo

2. The pure Javascript Example

This only needs some simple Javascript, but it's needed for every element and it's not nice to mix HTML and Javascript:
onmouseover="javascript:this.className='BehaviourExample_hover';"

Javascript Demo

3. The Prototype Example

    Event.observe(window, 'load', function(){
        $$('li.PrototypeExample').each(function(el){
              el.onmouseover  = function(){ this.className = 'PrototypeExample_hover'; }
              el.onmouseout  = function(){  this.className = 'PrototypeExample';  }
        });
    });

Prototype Demo

4. The Behaviour Example

    var myrules = {
      'li.BehaviourExample' : function(el){
          el.onmouseover  = function(){ this.className = 'BehaviourExample_hover'; }
          el.onmouseout  = function(){  this.className = 'BehaviourExample';  }
      }
    };
    Behaviour.register(myrules);

Behaviour Demo

5. The Event-Selectors Example

    var Rules = {
        'li.EventSelectorsExample:mouseover': function(element) {
            element.className = 'EventSelectorsExample_hover';
        },
        'li.EventSelectorsExample:mouseout': function(element) {
            element.className = 'EventSelectorsExample';
        }
    }
    EventSelectors.start(Rules);

Event-Selectors Demo

Only works in the margin zone if we use links. <li><a href="#">Text</a></li>. Just move your cursor slowly to the textboxes and you will see that they change the color. Plain <li>Text</li> works better. Not sure why...
This is it. Hope it helped you a little bit.

Back to the blog post