Javascript Mouse Events

1. mouseenter: The mouseenter event is fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.

HTML Code:

<ul id="test">

<li>item 1

<li>item 2

<li>item 3

</ul>

Javascript Code:

var test = document.getElementById("test");

test.addEventListener("mouseenter", function( event ) {

event.target.style.color = "purple";

setTimeout(function() {

event.target.style.color = "";

}, 500);

}, false);

2. mouseover: The mouseover event is fired when a pointing device is moved onto the element that has the listener attached or onto one of its children.

HTML Code:

<ul id="test">

<li>item 1

<li>item 2

<li>item 3

</ul>


Javascript Code:

test.addEventListener("mouseover", function( event ) {

event.target.style.color = "orange";

setTimeout(function() {

event.target.style.color = "";

}, 500);

}, false);