title: How to hide sliding div with css
body: <p>I would like to create a sliding effect. I have two divs that are placed beside. When hovering <code>div id="left"</code> that slides right and hides <code>div id="right"</code>. Around <code>div id="left"</code> there is something like a mousetracker that adds some space around <code>div id="left"</code> for additional place that can be hovered to hide <code>div id="right"</code>. I built an example to show what I mean:</p>
  
  <p><a href="http://jsfiddle.net/rpvHL/" rel="nofollow">Example</a></p>
  
  <p>Below is the HTML:</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div id="tracker"&gt;
          &lt;div id="left"&gt;slides right&lt;/div&gt;    
          &lt;div id="right"&gt;should disappear only when hover red div&lt;/div&gt;  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS for the slide effect:</p>
  
  <pre><code>/*Sliding Effects:*/
  #tracker:hover #left {
      margin-left: 150px;
      position: absolute;
      -webkit-transition-duration: 2s;
      -moz-transition-duration: 2s;
      -o-transition-duration: 2s;
      transition-duration: 2s;
  }
  #tracker:hover #right {
     visibility:hidden;
  }
  #tracker:hover {
     width: 400px;
     height: 200px;
     margin-top: -25px;
     padding-top: 25px;
  }
  </code></pre>
  
  <p>Now the problem is that the effect starts even when hovering <code>div id="right"</code>. So I still don't know how to solve this issue.</p>
  
  <p>I really would appreciate if there is someone who could help me out.</p>