title: How to create a div which disappears after a time, but hovering will keep it?
body: <p>I am trying to create a notification which will pop up, then disappear after a few seconds, but I want the user to be able to hover over it with the mouse to keep it from disappearing. If I could I'd like to also have a click make it disappear, but that's not necessary. I'm not sure how I could have the hover in html interact with the embedded ruby to stop the timeout. I'm aware I might need to restructure the whole thing to make it work. Here's the relevant css and html/erb snippets (not enough to run):</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>setTimeout(function() {
    $('#alert_box').fadeOut('fast');
  }, 3000);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.alert_wrap {
    padding: 0px 50px;
    margin-top: 3px;
    height: 5%;
    background-color: rgba(255, 0, 0, .3);
    border: 3px solid red;
    grid-row-start: 2;
    justify-self: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;% unless notice == nil %&gt;
  &lt;div id="alert_box" class="alert_wrap"&gt;
    &lt;p class="notice"&gt;&lt;%= notice %&gt;&lt;/p&gt;
    &lt;p class="alert"&gt;&lt;%= alert %&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;% end %&gt;</code></pre>
  </div>
  </div>
  </p>