title: fadein fadeout jquery on mouse-over
body: <p>I have three sections with a default logo...left,middle and right..on mouse over all sections are changing one by one with their own respective logo.</p>
  
  <p>When I mouse-over the left section it has changed with its logo but the problem is when I mouse-over that logo on left section its turned into the default section ( means left section vanished along with its logo)that I don't want. </p>
  
  <p>I need the mouse effect will be Off when i mouse-over the left section logo, same thing will be applicable on the other two section..</p>
  
  <p>The Html : </p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="logo"&gt;
          &lt;img src="http://wphooper.com/svg/examples/circle_filled_with_pattern.svg"&gt;
      &lt;/div&gt;
      &lt;div class="main" id="left"&gt;
          &lt;div class="dot1-top"&gt;
              &lt;img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="showhide"&gt;
              &lt;div class="main1 hide" style="background-image:url(http://bestwallpaperhd.com/wp-content/uploads/2012/12/vector-art-background.jpg)"&gt;&lt;/div&gt;            
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"  id="middle"&gt;
          &lt;div class="dot2-top"&gt;&lt;img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""&gt;&lt;/div&gt;
          &lt;div class="showhide2"&gt;
              &lt;div class="main2 hide2" style="background-image:url(http://www.vectorfree.com/media/vectors/yellow-background-red-swirl.jpg)"&gt;
              &lt;/div&gt;            
          &lt;/div&gt;           
      &lt;/div&gt;
      &lt;div class="main"  id="right"&gt;
          &lt;div class="dot3-top"&gt;&lt;img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""&gt;&lt;/div&gt;
          &lt;div class="showhide3"&gt;
              &lt;div class="main3 hide3" style="background-image:url(http://hdwallpaper2013.com/wp-content/uploads/2012/12/Windows-7-Background-HD-Wallpaper-1080x675.jpg)"&gt;
              &lt;/div&gt; 
          &lt;/div&gt;     
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And Here's the <a href="http://jsfiddle.net/swati712/3z6NA/" rel="nofollow">jsfiddle</a></p>