I don't want to list my navigation.
Here is what I have:
- window.addEvent('domready', function(){
- //select all a element from your page
- var list = $$('#Nav_wrapper .typeface-js');
- list.each(function(element) {
- // We change the default 'link' property to 'cancel' for the morph effect,
- // this will ensures effects are interrupted when the mouse is leaving
- // and entering, so the morph effect being called begin immediately
- element.set('morph', {link : 'cancel'});
- oldcolor=element.getStyle('#122c3c');
- // on mouse enter on our element we put in oldcolor the current color
- // and we morph to #aaa the result is a fading effect from the font color to #aaa
- // (you can use morph with any css property)
- element.addEvent('mouseenter', function(){
- element.morph({
- 'color': '#b53832'
- });
- });
- // on mouse leave on our element we morph back to oldcolor
- // the result is a fading effect on font color from #aaa to oldcolor
- element.addEvent('mouseleave', function(){
- element.morph({
- 'color': oldcolor,
- });
- });
- });
- });
