1let test = document.getElementById("test");
2
3test.addEventListener("mouseover", function( event ) {
4  alert("mouse over test!")
5  , false);

1$( "td" ).hover(
2  	() => { //hover
3    	$(this).addClass("hover");
4  	}, 
5  	() => { //out
6    	$(this).removeClass("hover");
7  	}
8);
9
10//or
11$( "td" )
12  	.mouseover( () => {
13    	$(this).addClass("hover");
14  	}) 
15  	.mouseout( () => {
16    	$(this).removeClass("hover");
17  	}
18);
19
20//or
21$( "td" )
22  	.mouseenter( () => {
23    	$(this).addClass("hover");
24  	}) 
25  	.mouseleave( () => {
26    	$(this).removeClass("hover");
27  	}
28);

1element.addEventListener('mouseover',someFunction);

1element.onmouseover = function() {
2  //Hovering
3}

1let test = document.getElementById("test");
2  
3// This handler will be executed only once when the cursor
4// moves over the unordered list
5test.addEventListener("mouseenter", function( event ) {   
6  // highlight the mouseenter target
7  event.target.style.color = "purple";
8
9  // reset the color after a short delay
10  setTimeout(function() {
11    event.target.style.color = "";
12  }, 500);
13}, false);

1// You can use jQuery
2
3$("p").hover(function(){
4  $(this).css("background-color", "yellow");
5  }, function(){
6  $(this).css("background-color", "pink");
7});