js hover event code example

Example 1: addeventlistener hover js

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

test.addEventListener("mouseover", function( event ) {
  alert("mouse over test!")
  , false);

Example 2: jquery hover

$( "td" ).hover(
  	() => { //hover
    	$(this).addClass("hover");
  	}, 
  	() => { //out
    	$(this).removeClass("hover");
  	}
);

//or
$( "td" )
  	.mouseover( () => {
    	$(this).addClass("hover");
  	}) 
  	.mouseout( () => {
    	$(this).removeClass("hover");
  	}
);

//or
$( "td" )
  	.mouseenter( () => {
    	$(this).addClass("hover");
  	}) 
  	.mouseleave( () => {
    	$(this).removeClass("hover");
  	}
);

Example 3: javascript hover event

element.onmouseover = function() {
  //Hovering
}

Example 4: 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 5: javascript on hover

<img onmouseover="enlargeImage(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">

<script>
function enlargeImage(x) {
  x.style.height = "64px";
  x.style.width = "64px";
}
</script>

Example 6: css change text on hover

Check this:
https://codepen.io/DevLorenzo/pen/vYXbJvd