event2.html

<style>
ul li{
	cursor:cross;
	padding:10px;
}

</style>
<h1>Events</h1>

<p>
Mouse Event: click, dblclick, mouseout,mouseover, mouseup, (mousehover) | ms | mouseenter, mouseleave
</p>

<ul>
	<li onmouseover="console.log('liover1')" onmouseout="console.log('liout1')"><a href="#" onmouseover="console.log('over1')" onmouseout="console.log('out1')">Link 1</a></li>
	<li onmouseover="console.log('over1')" onmouseout="console.log('out1')"><a href="#" onmouseover="console.log('liover2')" onmouseout="console.log('liout2')">Link 2</a></li>
	<li onmouseover="console.log('liover1')" onmouseout="console.log('liout1')"><a href="#" onmouseover="console.log('over3')" onmouseout="console.log('out3')">Link 3</a></li>
</ul>