event handling - jquery div overlay flickers on hover -

i'm using cycle plugin , i'm trying add overlay on top of slides "want see more"

my overlay working i'm getting event propagation issue. hover , overlay div flickers in , out. can overlay stop flickering when hover can't disappear when hover out. stays was. can clarify i'm doing wrong?

here's jquery:

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() {      }) }); 

here's html:

<div class="slider-nav">         <h2>our work</h2>         <div>             <!--slider anchors go here-->         </div>       </div><!--close sliders-->     <a href="#" id="testimonial">view testimonial</a><!--close testimonial-->     <div class="portfolio-slider">         <img src="/images/espn.jpg" width="625" height="355" alt="espn 1440 am" class="testimonial"/>         <img src="/images/remax.jpg" width="625" height="355" alt="re/max of new jersey" />                  <img src="/images/merchant.jpg" width="625" height="355" alt="merchant services, inc." />                    <img src="/images/ldi.jpg" width="625" height="355" alt="logistic dynamices, inc." />                    <img src="/images/mountainhound.jpg" width="625" height="355" alt="mountain hound" />                    <img src="/images/techlock.jpg" width="625" height="355" alt="tech lock, inc."  class="testimonial"/>         <img src="/images/angelo.jpg" width="625" height="355" alt="angelo helpdesk"  class="testimonial"/>          <img src="/images/globe.jpg" width="625" height="355" alt="globe max concept" />         <img src="/images/sarex.jpg" width="625" height="355" alt="sarex concept" />         <img src="/images/computers.jpg"  width="625" height="355" alt="computers 4 concept" />     </div><!--close portfolio-slider-->     <div class="overlay">         overlay     </div> 

here's css:

/********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;} 

i dont have e.stoppropagation in i'm submitting here, have tried it. know im on right track can't past this. don't think .stop().fadein() going helpful either. tried that.

thanks help!

if flickering, sounds overlay stealing hover event. either need place overlay within '.portfolio-slider' or need add overlay selector apply hover callbacks too. example:

change this:

portfolioslider.hover(function() { 

to this:

portfolioslider.add('.overlay').hover(function() {