Use the custom mouseenter and mouseleave events

 

<!--
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>
Use the custom mouseenter and mouseleave events : Mouse « Mootools « JavaScript DHTML

Related examples in the same category
