xxxxxxxxxx
<section id="global">
<nav>
<a href="" id="hide">hide</a><a href="" id="show">show</a>
</nav>
</section>
<section id="mouseEvents">
<nav>
<ul>
<li id="mousedown">mousedown</li>
<li id="mouseup">mouseup</li>
<li id="mouseover">mouseover</li>
<li id="mouseout">mouseout</li>
<li id="click">click</li>
<li id="dblclick">dblclick</li>
<!--using an id on the p instead of li so that the li does not change margin when the text changes margin-->
<li><p id="hover">hover</p></li>
</ul>
</nav>
</section>