<!--
MooTools is released under the Open Source MIT license,
which gives you the possibility to use it and modify
it in every circumstance.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
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;
}
</style>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
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");
}
});
});
</script>
<title>Mouseenter Demo</title>
</head>
<body>
<h1>Mouseenter/Mouseleave</h1>
<h2>Introduction</h2>
<p>
This demo shows how to use the custom mouseenter and mouseleave events. Just hover
the grey box below.
</p>
<div id="myElement">
</div>
<div class="help floated">
<strong>Why?</strong> MooTools features mouseenter and mouseleave because mouseover/mouseout sometimes
just does not work as expected. Mouseenter only fires once you enter the element and
does not fire again if your mouse crosses over children of the element.
</div>
<div style="clear: both;">
<!-- space -->
</div>
<h2>Menu Example</h2>
<p>
This example explains how to open a menu-like element on mouseenter and
how it closes again on mouseleave.
</p>
<div id="myOtherElement">
<span><strong>Menu</strong></span>
<div>
<a href="#">Menuelement 1</a>
<a href="#">Menuelement 2</a>
<a href="#">Menuelement 3</a>
</div>
</div>
</body>
</html>