【问题标题】:how to display both prev/next button when hover img in cycle2.js在cycle2.js中悬停图像时如何显示上一个/下一个按钮
【发布时间】:2015-03-08 03:05:11
【问题描述】:

我想在cycle2.js 中悬停图像时同时显示上一个/下一个按钮。

这是供您参考的链接http://jquery.malsup.com/cycle2/demo/prevnext.php

<div class="cycle-slideshow" 
data-cycle-fx=scrollHorz
data-cycle-timeout=0
>
<!-- prev/next links -->
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<img src="http://malsup.github.io/images/p1.jpg">
<img src="http://malsup.github.io/images/p2.jpg">
<img src="http://malsup.github.io/images/p3.jpg">
<img src="http://malsup.github.io/images/p4.jpg">
</div>

【问题讨论】:

  • 您可以在循环幻灯片上使用 position: relative,在按钮上使用 position: absolute。我建议您先尝试一下,如果您需要进一步的帮助,请再回来。
  • 定位是什么意思?我只想在悬停图像时同时显示下一个/上一个按钮。因为如果您打开链接并悬停图像,它只会显示一个按钮。
  • 我好像理解错了,现在明白了,看看下面的答案。

标签: javascript jquery html css jquery-cycle2


【解决方案1】:

应该这样做:

$(function () {
    $(".cycle-prev, .cycle-next").css("opacity", "0");

    $(".cycle-slideshow").hover(function () {
        $(".cycle-prev, .cycle-next").css("opacity", ".7");
    }, function () {
        $(".cycle-prev, .cycle-next").css("opacity", "0");
    });
});

【讨论】:

  • 感谢您的回答。我现在的问题是我的页面上有 3 个幻灯片。当我将幻灯片 1 悬停时,幻灯片 2 和幻灯片 3 上的按钮也会显示。我希望按钮仅在悬停其各自的幻灯片时显示。
  • 现在可以了,我只是为每个 div 输入 ID。非常感谢您对 sdcr 的帮助。
猜你喜欢
  • 2019-06-03
  • 2022-01-25
  • 2021-09-14
  • 1970-01-01
  • 1970-01-01
  • 2016-12-21
  • 1970-01-01
  • 2017-08-09
  • 2020-04-05
相关资源
最近更新 更多