div.floated {
width: 400px;
float: left;
margin-left: 1em;
}
div#myElement {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #f9f9f9;
float: left;
}
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;
}
window.addEvent('domready', function(){
//First Example
var el = $('myElement'),
color = el.getStyle('backgroundColor');
// We are setting the opacity of the element to 0.5 and adding two events
$('myElement').set('opacity', 0.5).addEvents({
mouseenter: function(){
// This morphes the opacity and backgroundColor
this.morph({
'opacity': 1,
'background-color': '#c6d880'
});
},
mouseleave: function(){
// Morphes back to the original style
this.morph({
opacity: 0.5,
backgroundColor: color
});
}
});
// Second Example
// The same as before: adding events
$('myOtherElement').addEvents({
'mouseenter': function(){
// Always sets the duration of the tween to 1000 ms and a bouncing transition
// And then tweens the height of the element
this.set('tween', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
}).tween('height', '150px');
},
'mouseleave': function(){
// Resets the tween and changes the element back to its original size
this.set('tween', {}).tween('height', '20px');
}
});
});
Mouseenter Demo
Mouseenter/Mouseleave
Introduction
This demo shows how to use the custom mouseenter and mouseleave events. Just hover
the grey box below.
This example explains how to open a menu-like element on mouseenter and
how it closes again on mouseleave.