title: What's the difference between mouseenter and mouseover, and mouseout and mouseleave?
body: <p>I'm looking at the <a href="https://developer.mozilla.org/en-US/docs/Web/Events" rel="nofollow noreferrer">MDN documentation</a> and it says: </p>
  
  <pre><code>mouseenter  A pointing device is moved onto the element that has the listener attached.
  mouseleave  A pointing device is moved off the element that has the listener attached.
  mouseover   A pointing device is moved onto the element that has the listener attached or onto one of its children.
  mouseout    A pointing device is moved off the element that has the listener attached or off one of its children.
  </code></pre>
  
  <p>Which ok, sounds like mouseenter/mouseleave fires on just the element it self, whereas mouseover/mouse also fires when these events happen over the children. </p>
  
  <p>I have a snippet here showing the different cases: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const body1 = document.getElementById("mouseenter");
  
  
  const el1 = document.createElement("div"); 
  body1.append(el1); 
  
  const el2 = document.createElement("div"); 
   el2.style = "position: relative; top: -60px;"; 
  el1.append(el2);
  
  const el2b = document.createElement("div"); 
  el1.append(el2b);
  
  
  
  const el3  = document.createElement("div"); 
  const el4  = document.createElement("div"); 
  el4.style = "position: relative; top: -60px;"; 
  
  const el4b  = document.createElement("div"); 
  
  const body2 = document.getElementById("mouseover");
  body2.append(el3); 
  el3.append(el4); 
  el3.append(el4b); 
  
  const inHandler = (event) =&gt; {
    event.target.className = "in"; 
  }
  
  const outHandler = (event) =&gt; {
    event.target.className = "out"; 
  }
  
  el1.addEventListener("mouseenter", inHandler); 
  el1.addEventListener("mouseleave", outHandler); 
  
  el2.addEventListener("mouseenter", inHandler); 
  el2.addEventListener("mouseleave", outHandler); 
  
  el2b.addEventListener("mouseenter", inHandler); 
  el2b.addEventListener("mouseleave", outHandler); 
  
  
  el3.addEventListener("mouseover", inHandler); 
  el3.addEventListener("mouseout", outHandler); 
  
  el4.addEventListener("mouseover", inHandler); 
  el4.addEventListener("mouseout", outHandler); 
  
  el4b.addEventListener("mouseover", inHandler); 
  el4b.addEventListener("mouseout", outHandler);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    border: solid 1px black; 
    margin: 1em;
    padding: 1em; 
    display: inline-block; 
    
    min-width: 50px;
    min-height: 50px; 
    
    background-color: grey; 
  }
  
  .in {
    background-color: green; 
  }
  
  .out {
    background-color: blue; 
  }
  
  p {
     margin-bottom: 2em; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id = "mouseenter"&gt;
    &lt;p&gt;mouseenter/mouseleave&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id = "mouseover"&gt;
    &lt;p&gt;mouseover/mouseout&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now judging on the behaviour of this code - I'm wondering if there's a typo in that document ion. </p>
  
  <p>For example: </p>
  
  <ul>
  <li><p>For mouseenter/mouseleave, I would expect that when you hover over the sticking out element, only that one turns green - but the parent turns green too. </p></li>
  <li><p>For mouseover/mouseout, I would expect that when you hover over the sticking out element, only that one turns green - but the parent does not turn green.</p></li>
  <li><p>For mouseover/mouseout,  if you hover over the inner element, then exit it, it turns blue, but I would expect that the parent turns blue too. (Although I accept that that might a race condition where it 'reentered' the parent element to turn it green. </p></li>
  </ul>
  
  <p>Can someone explain what nuance about mouseevents that I'm missing here? </p>