title: jquery keep hover state
body: <p>I have an hidden element which contains a list. What I want to achieve is, to keep the hover state while moving from the clicked div with the cursor to the element with the list. The element which contains the list, should first disappear as soon as I go away from it e.g point away with the cursor. How can I achieve that?</p>
  
  <p>I have this markup:</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>$('.hover').hover(function() {
    $('.hoverDiv').addClass('show')
  }, function() {
    $('.hoverDiv').removeClass('show')
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .hoverDiv {
    display: none;
    border: 1px solid red;
  }
  
  .hoverDiv.show {
    display: block;
  }</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;div class="container"&gt;
    &lt;div class="hover"&gt;
      &lt;p&gt;
        hover this div
      &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="hoverDiv"&gt;
      show me when hovered
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the <a href="https://jsfiddle.net/xpfk6xe5/1/" rel="nofollow noreferrer">JSFIDDLE</a></p>