如何在Cycle2标题中悬停时显示/隐藏

时间:2014-08-20 06:51:35

标签: jquery html css

我有cycle2插件html:

<div class="cycle-box">
    <div class="cycle-slideshow" 
        data-cycle-fx="shuffle" 
        data-cycle-shuffle-right="0" 
        data-cycle-shuffle-top="-75" 
        data-cycle-speed="1000" 
        data-cycle-timeout="5000" 
        data-cycle-prev=".cycle-prev" 
        data-cycle-next=".cycle-next"
    >
        <div class="cycle-overlay"></div>

        <img src="neighbors-2014_48961397118651.jpg" data-cycle-title="Title 1" data-cycle-desc="Sonnenberg Gardens">
        <img src="doraemon-2014-nobita-and-the-haunts-of-evil_79831403058958.jpg" data-cycle-title="Title 2" data-cycle-desc="Muir Woods National Monument">
        <img src="maleficent-2014_13821402289461.jpg" data-cycle-title="Title 3" data-cycle-desc="San Franscisco Bay">
        <img src="blended-2014_83551399536938.jpg" data-cycle-title="Title 4" data-cycle-desc="Adirondack State Park">
    </div>
    <div class="cycle-prev"></div>
    <div class="cycle-next"></div>
</div>

和jQuery:

$('.cycle-slideshow').hover(function () {
    $(this).parent().find('.cycle-overlay').fadeIn();
},
function () {
     $('.cycle-overlay').hide();
});

我希望当cycle2启动标题时隐藏并显示悬停时。三江源!

1 个答案:

答案 0 :(得分:1)

刚试过,我的代码工作正常......

Demo

如果您需要任何东西,请告诉我..我会帮助您..

$('.cycle-slideshow').hover(function () {

   $(this).parent().find('.cycle-overlay').fadeIn();
},
function () {
   $('.cycle-overlay').hide();
});