title: On mouseleave of one div AND mouseenter of other div when both condition true
body: <p>There is 4 divs like following</p>
  
  <pre><code>&lt;style&gt;
      .displayNoneIcon {
          display: none;
      }
  &lt;/style&gt;
  
  &lt;div id="div1" style="float: left"&gt;
      &lt;div id="div11"&gt;hello&lt;/div&gt;
      &lt;div id="div12"&gt;hi&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="div2" style="float: right"&gt;
      &lt;div id="div21" class="displayNoneIcon"&gt;&lt;a href="#"&gt;bye&lt;/a&gt;&lt;/div&gt;
      &lt;div id="div22" class="displayNoneIcon"&gt;&lt;a href="#"&gt;see ya&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to show div 21 when i hover on div11, dev22 on hover of div12, just like menu it should stay and clickable. If i move out from div11 then div21 must hide, except user enters into div21. Currently if i move out my pointer out of div11 towards div21 its hiding. i want it to be stayed.
  Both must be in separate div like above.</p>
  
  <p>I tried with mouseenter and mouseleave but its not fulfilling my requirement. Please help me with this.</p>
  
  <pre><code>$( "body" ).on( "mouseenter", "#div11", function(event) {
      $( "#div21" ).removeClass( "displayNoneIcon" );
  });
  $( "body" ).on( "mouseleave", "#div11", function(event) {
      $( "#div21" ).addClass( "displayNoneIcon" );
  });
  $( "body" ).on( "mouseenter", "#div12", function(event) {
      $( "#div22" ).removeClass( "displayNoneIcon" );
  });
  $( "body" ).on( "mouseleave", "#div12", function(event) {
      $( "#div22" ).addClass( "displayNoneIcon" );
  });
  </code></pre>
  
  <p>Thanks in advance.
  <a href="http://jsfiddle.net/kpbhat86/AWCn3/3/" rel="nofollow">jsfiddle</a> link </p>