Mouse Events (Framework: MooTools)

HTML Quellcode

<div id="myElement">
</div>

<div style="clear: both;">
    <!-- space -->
</div>

<div id="myOtherElement">
    <span><strong>Menu</strong></span>
    <div>
        <a href="#">Menü Element 1</a>
        <a href="#">Menü Element 2</a>
        <a href="#">Menü Element 3</a>
    </div>
</div>

CSS Quellcode

div.floated {
	width: 400px;
	float: left;
	margin-left: 1em;
}

div#myElement {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	background-color: #f9f9f9;
	float: left;
        margin-bottom:10px;
}

div#myOtherElement {
	width: 200px;
	height: 20px;
	overflow: hidden;
	border: 1px solid black;
	background-color: #f9f9f9;
}

div#myOtherElement span, div#myOtherElement a {
	display: block;
	padding: 0 3px;
}

div#myOtherElement a:hover {
	background: #f5f5f5;
}

Javascript Quellcode

window.addEvent('domready', function(){
    // Beispiel 1:
 
    var el = $('myElement'), color = el.getStyle('backgroundColor');
    $('myElement').set('opacity', 0.5).addEvents({
        mouseenter: function(){
            this.morph({
                'opacity': 1,
                'background-color': '#c6d880'
            });
        },
        mouseleave: function(){
        
            this.morph({
                opacity: 0.5,
                backgroundColor: color
            });
        }
    });
    
    // Beispiel 2:
 
    $('myOtherElement').addEvents({
        'mouseenter': function(){
            this.set('tween', {
                duration: 1000,
                transition: Fx.Transitions.Bounce.easeOut
            }).tween('height', '150px');
        },
        'mouseleave': function(){
            this.set('tween', {}).tween('height', '20px');
        }
    });
});