Jquery mouseenter() vs mouseover()

Question

So after reading a recently answered question i am unclear if i really understand the difference between the mouseenter() and mouseover(). The post

Answer 1

This example demonstrates the difference between the mousemove, mouseenter and mouseover events:

https://jsfiddle.net/z8g613yd/

HTML:

    
onmousemove: 
 Mouse over me!



    
onmouseenter: 
 Mouse over me!



    
onmouseover: 
 Mouse over me!

CSS:

div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
    height: 50px;
}

p span {
    background-color: #86fcd4;
    padding: 0 20px;
}

JS:

var x = 0;
var y = 0;
var z = 0;

function myMoveFunction() {
    document.getElementById("demo").innerHTML = z += 1;
}

function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x += 1;
}

function myOverFunction() {
    document.getElementById("demo3").innerHTML = y += 1;
}

• onmousemove : occurs every time the mouse pointer is moved over the div element.
• onmouseenter : only occurs when the mouse pointer enters the div element.
• onmouseover : occurs when the mouse pointer enters the div element, and its child elements (p and span).