<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js"></script>
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;
line-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;
}
<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>
|