Change Opacity on Mouse Hover

Tested with MooTools 1.2

For this example I have used class rather than id and this does work on fine on images, paragraphs, div etc.

HTML

<div class="transparent_hover">This is where the text goes</div>

JavaScript

window.addEvent('domready', function() {
    $$('.transparent_hover').set('opacity', 0.6);
    $$('.transparent_hover').addEvents({
        'mouseenter': function() { this.set('opacity', 1); },
        'mouseleave': function() { this.set('opacity', 0.6); }
    });
});

If you want to tween the opacity (it does look a little better in many cases). Only set changes to tween inside the addEvents function.

window.addEvent('domready', function() {
    $$('.transparent_hover').set('opacity', 0.6);
    $$('.transparent_hover').addEvents({
        'mouseenter': function() { this.tween('opacity', 1); },
        'mouseleave': function() { this.tween('opacity', 0.6); }
    });
});

There is a demo above the post, just hover over the green bar.