onmouseenter Event

The onmouseenter event occurs when the mouse is moved onto an element.

It is often used with the onmouseleave event, which occurs when the mouse is moved out of an element.

This is what the final product will look like, which is isolating an h3 element:

Put mouse here!

1. Identify function in JavaScript
We must identify the mouseEnter function and mouseLeave function in JavaScript code

				
function mouseEnter() {
	document.getElementById("dpdemo")
}

function mouseLeave() {
	document.getElementById("dpdemo")
}

As you can see there, we have first identified our functions in JavaScript. The element we are isolating and using this function is called "dpdemo", which is the name of the h3 ID.

2. Identify element that we are placing this function on in HTML
We must now go to our HTML, and add our function

	
			
< h3 id="dpdemo"
onmouseenter="mouseEnter()"
onmouseleave="mouseLeave()">Put mouse here! < / h3 >

3. Add cool color to make text change when mouse hovers over
We can do this back in JavaScript. This can also be done at the same time that step 1 is completed. Our JavaScript functions will look like this at the end:

			
function mouseEnter() {
    document.getElementById("dpdemo").style.color = "#ff8566";
}

function mouseLeave() {
    document.getElementById("dpdemo").style.color = "black";
}

As you can tell, all that is added at the end is the addition of a style.color element.

You can then apply this same logic to an image as well (like a picture of my cute dog). Here's how you might do so.