Question

我正在使用循环插件，我正试图在幻灯片上添加一个叠加层，表示“想要查看更多”

我的叠加层正在运行，但我遇到了事件传播问题。我盘旋，叠加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（）也会有所帮助。我试过了。

感谢您的帮助！

Answer 1

所以对于后来发现这一点的人来说，

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

进行淡入淡出的关键是在投资组合滑块div和overlay div周围添加一个包装div。然后使用我的jquery首先定位。

所以我添加了.overlay-wrapper

<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');
    }
);

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

Answer 2

如果它闪烁，听起来叠加层正在窃取您的悬停事件。您需要将叠加层放在“.portfolio-slider”中，或者您需要将叠加层添加到您应用悬停回调的选择器中。例如：

改变这个：

portfolioSlider.hover(function() {

对此：

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

jquery div覆盖在悬停时闪烁

2 个答案: