Use the custom mouseenter and mouseleave events : Mouse « Mootools « JavaScript DHTML

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" "">
<html xmlns="" xml:lang="en" lang="en">
  <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;
  <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
        'opacity': 1,
        'background-color': '#c6d880'
    mouseleave: function(){
      // Morphes back to the original style
        opacity: 0.5,
        backgroundColor: color

  // Second Example
  // The same as before: adding events
    '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');
  <title>Mouseenter Demo</title>
    This demo shows how to use the custom mouseenter and mouseleave events. Just hover
    the grey box below.
  <div id="myElement">
  <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 style="clear: both;">
    <!-- space -->
  <h2>Menu Example</h2>
    This example explains how to open a menu-like element on mouseenter and
    how it closes again on mouseleave.
  <div id="myOtherElement">
      <a href="#">Menuelement 1</a>
      <a href="#">Menuelement 2</a>
      <a href="#">Menuelement 3</a>


Related examples in the same category