javascript addEventListener mouseover size code example

Example 1: get hover element js

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);

Example 2: hover vanilla javascript

var target = document.querySelector(".button");
target.addEventListener("mouseover", mOver, false);
target.addEventListener("mouseout", mOut, false);

function mOver() {
   target.setAttribute("style", "background-color:blue;")
}

function mOut() {  
   target.setAttribute("style", "background-color:green;")
}