title: Hover on one div to display another div
body: <p>Cracking for a whole day now and still couldnt find a simple solution to this problem.</p>
  
  <p>I have a class</p>
  
  <pre><code>  .displaynone{
        display:none;
      }
  </code></pre>
  
  <p>I am trying to</p>
  
  <ol>
  <li>Hover on #hoversubheader1 and display #subheader1 by removing .displaynone on #subheader1.</li>
  <li>Do not allow #subheader1 to disappear when I move my mouse from #hoversubheader1 into #subheader1</li>
  <li>Add back that class to #subheader1 when my mouse is in neither #subheader1 nor #hoversubheader1.</li>
  </ol>
  
  <p>Have yet to accomplish step 2 and 3.</p>
  
  <p>I know you will want me to nest the elements, but I have reasons to not do so. In reality the two divs are separated by some 'space', so naturally I might need a setTimeout or other timing related functions for this but am also not sure if I am on the right track.</p>
  
  <p>Would make my day if someone could help on this.</p>
  
  <p>Markup</p>
  
  <pre><code>&lt;div class="ui basic vertical segment" id="header"&gt;
          &lt;div class="ui container"&gt;
              &lt;div class="ui text menu"&gt;
                  &lt;a class="item"&gt;
                      Item
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="ui text menu displaynone" id="subheader"&gt;
                      &lt;a class="right item" id="hoversubheader1"&gt;
                          subheadertitle1
                      &lt;/a&gt;
                      &lt;a class="item" id="hoversubheader2"&gt;
                          subheadertitle2
                      &lt;/a&gt;
              &lt;/div&gt;&lt;!--end of subheadermenu--&gt;
              &lt;div class="ui text menu displaynone" id="subheader1"&gt;
                      &lt;a class="right item"&gt;
                          detail
                      &lt;/a&gt;
                      &lt;a class="item"&gt;
                          detail
                      &lt;/a&gt;
              &lt;/div&gt;&lt;!--end of subheadermenu--&gt;
              &lt;div class="ui text menu displaynone" id="subheader2"&gt;
                      &lt;a class="right item"&gt;
                          detail
                      &lt;/a&gt;
                      &lt;a class="item"&gt;
                          detail
                      &lt;/a&gt;
              &lt;/div&gt;&lt;!--end of subheadermenu--&gt;
          &lt;/div&gt;&lt;!--end of container--&gt;
      &lt;/div&gt;&lt;!--end of segment--&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>    (function($) {
      "use strict"; // Start of use strict
      //header hover brings out subheader bar
      $("#header").hover(
        function () {
          $("#subheader").removeClass("displaynone");
        },
        function () {
          $("#subheader").addClass("displaynone");
        }
      );
      //hovering on each subheadertitle should display each subheader1, subheader2 etc
      $('#hoversubheader1,#subheader1').mouseenter(function(){
  
          $('#subheader1').removeClass("displaynone");
      }).mouseleave(function(){
  
          $("#subheader1").addClass("displaynone");
  
      });
  
      $('#hoversubheader2,#subheader2').mouseenter(function(){
  
          $('#subheader2').removeClass("displaynone");
      }).mouseleave(function(){
  
          $("#subheader2").addClass("displaynone");
  
      });
      }(jQuery)); // End of use strict
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#header{
      background-color: white;
      opacity: 0.97;
      position: fixed;
      width: 100%;
      z-index: 99;
      padding:0;
      padding-bottom:0;
      -webkit-transition: all 250ms ease-in-out;
      -moz-transition: all 250ms ease-in-out;
      -o-transition: all 250ms ease-in-out;
      transition: all 250ms ease-in-out;
  }
  
  #header &gt; .ui.container &gt; .ui.text.menu{
      margin-bottom:0;
  }
  
  
  #subheader,
  #subheader1,
  #subheader2{
    padding:0;
    margin:0;
  }
  
  #subheader1,
  #subheader2{
    height:200px;
  }
  
  #subheader &gt; .ui.text.menu,
  #subheader1 &gt; .ui.text.menu,
  #subheader2 &gt; .ui.text.menu{
    margin:0;
  }
  #subheader.displaynone,
  #subheader1.displaynone,
  #subheader2.displaynone{
    display:none;
  }
  </code></pre>