title: Make a div to disappear on hover
body: <p>I'm trying to make a div disappear on <code>hover</code> with CSS but I don't want it reappearing when moving the mouse again. I know I can do it with Javascript like this:</p>
  
  <pre><code>function CloseRegister() {
      var regdiv = document.getElementById("register");
      register.style.display = "none";
  }
  </code></pre>
  
  <p>But I want it to have CSS transitions so it loses it takes like 2 seconds to disappear (without reappearing again)..</p>
  
  <p>This is what I've tried so far:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .register
  {
      background-color:Purple;
      transition: 2s;
      -o-transition: 2s;
      -webkit-transition: 2s;
      -moz-transition: 2s;
  }
  .register:hover
  {
      opacity:0;
  }
  &lt;/style&gt;
  
  &lt;div id="register" class="register" style="position:fixed; width:50%; height:50%; top:25%; left:25%;"&gt;&lt;/div&gt;
  </code></pre>
  
  <h2>EDIT:</h2>
  
  <p>Fixed it with @<a href="https://stackoverflow.com/users/511529/goleztrol">GolezTrol</a>'s help:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function CloseRegister() {
      var regdiv = document.getElementById("register");
      register.onmouseup = function () {
          register.onmouseup = null;
          register.classList.add('hovered');
          setTimeout(function () { register.style.display = 'none'; }, 2000);
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.register
  {
      background-color:Purple;
      transition: 2s;
      -o-transition: 2s;
      -webkit-transition: 2s;
      -moz-transition: 2s;
  }
  .register.hovered
  {
      background-color:transparent;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div onmousedown="CloseRegister()" id="register" class="register" style="position:fixed; width:50%; height:50%; top:25%; left:25%;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>