JavaScript DHTML/Mootools/Mouse

Материал из Web эксперт
Перейти к: навигация, поиск

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>