jquery的DIV覆盖闪烁悬停

问题描述：

我使用周期插件，我想加上幻灯片上重叠，这将说：“希望看到更多的”jquery的DIV覆盖闪烁悬停

我的覆盖工作，但我得到事件传播问题。我徘徊，覆盖div只是闪烁进出。当我徘徊时，我可以让叠加层停止闪烁，但当我徘徊时无法让它消失。它只停留在原来的位置。有人能澄清我做错了什么吗？

这里是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() { 

    }) 
});

这里的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 All concept" /> 
    </div><!--close portfolio-slider--> 
    <div class="overlay"> 
     Overlay 
    </div>

这里的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;}

我没有e.stopPropagation什么我提交这里，但我已经尝试过了。我知道我在正确的轨道上，但无法超越这一点。我不认为.stop（）。fadeIn（）也会有帮助。我试过了。

感谢您的帮助！

你能提供css吗？已添加 – chchrist

。 – heyjohnmurray

你可以*格式*为可读性的CSS？ –

答

因此，对于任何人谁认为这以后，

我找到了一个很好的答案。 Jquery Hover Flickering issue

使褪色是围绕加入投资组合滑块DIV的包装股利和覆盖DIV的关键。然后针对我的第一个与我的jQuery。

所以我说.overlay-包装

<div class="overlay-wrapper"> 
     <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 All concept" /> 
     </div><!--close portfolio-slider--> 
     <div class="overlay"> 
      <p>Overlay</p> 
      <p><a href="#">Click here</a></p> 
     </div> 
    </div><!--close overlay-wrapper-->

的话，我的目标和我的jQuery和我没有担心闪烁了：

$(".overlay-wrapper").hover(
    function() { 
     console.log('hover in');  
     $(".overlay").fadeIn('fast'); 
    }, 
    function() { 
     console.log('hover out'); 
     $(".overlay").fadeOut('fast'); 
    } 
);

我尝试使用。新增（“.overlay”），它确实淡入淡出，但我仍然有闪烁。

答

如果闪烁，它听起来就像是叠加窃取你的悬停事件。要么你就需要把“.portfolio滑块”中的重叠或者你需要覆盖添加到您的应用悬停回调也选择。例如：

更改此：

portfolioSlider.hover(function() {

要这样：

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

jquery的DIV覆盖闪烁悬停

相关推荐