title: How do I extend the range of element so as to allow onmouseout trigger later
body: <p>I have a HTML div where a mouse over will trigger a toolbar to pop up on the bottom left corner of the div. I want to add buttons to the div but I realise that the mouseout html attribute does not consider the toolbar as part of the div. As such the toolbar will be removed the moment i mouse over the toolbar. Is there any way to keep the toolbar there when i mouse over it?</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>function glowRow(row){
      row.classList.add('mm-glow')
      let div = document.createElement('div')
      div.classList.add('toolbar')
      row.appendChild(div)
  }
  
  function deactivateGlowRow(row){
      row.classList.remove('mm-glow')
      $(row).children().remove()
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mm-glow {
    border: 1px solid;
      border-color: #86b7fe;
      outline: 0;
      box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 75%);
    z-index: 1;
    position:relative;
  }
  
  .row {
    height: 250px;
    width:250px;
    background-color:red;
  }
  
  .toolbar {
    background-color: rgb(13 110 253 / 75%);
    color: white;
    border-radius: 8px 8px 0 0;
    left: -5px;
    top: 250px;
    height:50px;
    width:50px;
    position:absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="row mm-align-top" onmouseover="glowRow(this)" onmouseout="deactivateGlowRow(this)"&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>