JavaScript DHTML/Mootools/Mouse
Содержание
Use the custom mouseenter and mouseleave events
<source lang="html4strict">
<!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>
Mouseenter/Mouseleave
Introduction
This demo shows how to use the custom mouseenter and mouseleave events. Just hover the grey box below.
Why? 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.
Menu Example
This example explains how to open a menu-like element on mouseenter and how it closes again on mouseleave.
Menu
<a href="#">Menuelement 1</a> <a href="#">Menuelement 2</a> <a href="#">Menuelement 3</a>
</body> </html>
</source>