title: jquery div overlay flickers on hover
body: <p>I'm using the cycle plugin and I'm trying to add an overlay on top of slides that will say "want to see more"</p>
  
  <p>My overlay is working but I'm getting an event propagation issue. I hover and the overlay div just flickers in and out. I can get the overlay to stop flickering when i hover but can't get it to disappear when i hover out. It just stays where it was. Can someone clarify what I'm doing wrong?</p>
  
  <p>Here's the jquery:</p>
  
  <pre><code>var portfolioSlider = $('.portfolio-slider');
  var portfolioImage = $('.portfolio-slider img');
  
  portfolioSlider.cycle({ 
      fx: "fade",
      delay:  1000,
      timeout: 10000,
      pager: ".slider-nav div",
      pagerEvent: "click",
      activePagerClass: "activeSlide"
  }); 
  
  portfolioSlider.hover(function() {
      $(".overlay").css('cursor','pointer').fadeIn('fast',function() {
  
      })
  }, function() {
      $(".overlay").css('cursor','pointer').fadeOut('fast',function() {
  
      })
  });
  </code></pre>
  
  <p>Here's the html: </p>
  
  <pre><code>&lt;div class="slider-nav"&gt;
          &lt;h2&gt;Our Work&lt;/h2&gt;
          &lt;div&gt;
              &lt;!--slider anchors go here--&gt;
          &lt;/div&gt;  
      &lt;/div&gt;&lt;!--close sliders--&gt;
      &lt;a href="#" id="testimonial"&gt;View Testimonial&lt;/a&gt;&lt;!--close testimonial--&gt;
      &lt;div class="portfolio-slider"&gt;
          &lt;img src="/images/espn.jpg" width="625" height="355" alt="ESPN 1440 AM" class="testimonial"/&gt;
          &lt;img src="/images/remax.jpg" width="625" height="355" alt="RE/MAX of New Jersey" /&gt;         
          &lt;img src="/images/merchant.jpg" width="625" height="355" alt="Merchant Services, Inc." /&gt;           
          &lt;img src="/images/ldi.jpg" width="625" height="355" alt="Logistic Dynamices, Inc." /&gt;           
          &lt;img src="/images/mountainhound.jpg" width="625" height="355" alt="Mountain Hound" /&gt;           
          &lt;img src="/images/techlock.jpg" width="625" height="355" alt="Tech Lock, Inc."  class="testimonial"/&gt;
          &lt;img src="/images/angelo.jpg" width="625" height="355" alt="Angelo HelpDesk"  class="testimonial"/&gt; 
          &lt;img src="/images/globe.jpg" width="625" height="355" alt="Globe Max concept" /&gt;
          &lt;img src="/images/sarex.jpg" width="625" height="355" alt="SAREX concept" /&gt;
          &lt;img src="/images/computers.jpg"  width="625" height="355" alt="Computers 4 All concept" /&gt;
      &lt;/div&gt;&lt;!--close portfolio-slider--&gt;
      &lt;div class="overlay"&gt;
          Overlay
      &lt;/div&gt;
  </code></pre>
  
  <p>here's the css:</p>
  
  <pre><code>/********PORTFOLIO SLIDER***********/
  .slider-nav{float:left; width:210px; height: 440px; border-right: 1px solid #ccc; margin-right: 30px;}
  .slider-nav div{border-top:1px solid #fff; border-bottom: 1px solid #ccc;}
  .slider-nav a{display: block; line-height: 20px; font-size:13px; border-top:1px solid #ccc; border-bottom: 1px solid #fff; text-decoration: none; padding: 5px 10px; color:#a2a2a2; text-shadow: 0px 1px 0px #fff;}
  .activeSlide{color:#fff !important; background: #1D5C8F !important; font-weight:normal; text-shadow: 1px 1px 1px #174B74 !important;}
  .slider-nav a:hover{background: #e5e5e5;}
  .portfolio-slider{float:left; width:625px; height: 355px; overflow: hidden; border: 4px solid #ccc; margin-bottom: 20px;}
  .request-quote{float:right; margin: 20px 0px;}
  .request-quote a{float:left; display:block; width:130px; text-decoration: none; font-weight:bold; font-size:14px; padding:10px; text-shadow: 2px 2px 2px #333; color:#EDEEF2; background: #1D5C8F; border: 1px solid #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-align: center;}
  .request-quote a:hover{-webkit-box-shadow: 1px 2px 4px 1px #000000; -moz-box-shadow: 1px 2px 2px 1px #000000; box-shadow: 1px 2px 4px 1px #000000; }
  #testimonial{position: absolute; top:33px; left:707px; z-index: 99999; background: #f00; width:193px; height: 125px; background: url('/images/testimonial.png') no-repeat; text-indent: -99999px; display: none;}
  .overlay{background: url('/images/overlay.png') repeat; width:625px; height:355px; position: absolute; top:34px; left:275px; z-index: 99999; display: none;}
  </code></pre>
  
  <p>I dont have e.stopPropagation in what I'm submitting here, but I have tried it. I know im on the right track but can't get past this. I don't think .stop().fadeIn() is going to be helpful either. I tried that.</p>
  
  <p>Thanks for your help!</p>