javascript mouse over and mouse enter 1

javascript mouse over and mouse enter

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

// This handler will be executed only once when the cursor
// moves over the unordered list
test.addEventListener("mouseenter", function( event ) {
  // highlight the mouseenter target
  event.target.style.color = "purple";

  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);

// This handler will be executed every time the cursor
// is moved over a different list item
test.addEventListener("mouseover", function( event ) {
  // highlight the mouseover target
  event.target.style.color = "orange";

  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);

Here is what the above code is Doing:
1. The first event handler is listening for the mouseenter event.
2. When the mouseenter event is triggered, the event handler changes the color of the target element to purple.
3. The event handler then sets a timeout to change the color back to its original color after 500 milliseconds.
4. The second event handler is listening for the mouseover event.
5. When the mouseover event is triggered, the event handler changes the color of the target element to orange.
6. The event handler then sets a timeout to change the color back to its original color after 500 milliseconds.

The mouseenter event is only triggered once when the mouse enters the unordered list. The mouseover event is triggered every time the mouse enters a different list item.

Similar Posts