1

我正在尝试使按钮默认隐藏，并且仅在鼠标悬停时才可见。尽管我遇到了问题，即使我在 CSS 中设置了无显示，轮播核心代码似乎也在添加显示块。

var $slides = $("#slides");
$slides.find('ul.banners').eq(0).carouFredSel({
    height: 360,
    items: {
        visible: 1
    },
    scroll: {
        easing: "easeInOutSine",
        duration: 1200
    },
    auto: {
        delay: 1000
    },
    prev: {
        button: $slides.find('.prev'),
        items: 1
    },              
    next:{
        button: $slides.find('.next'),
        items: 1
    },
    pagination: {
        container: $slides.find(".pagination"),
        keys: true,
        anchorBuilder: function(nr) { 
            return '<li><a href="#"><span>'+nr+'</span></a></li>'; 
        }
    }
});
$slideButtons = $slides.find(".next,.prev");
$slides.find('ul.banners').hover(function(){
    $slideButtons.fadeIn();
},function(){
    $slideButtons.fadeOut();
});

HTML

<div id="slides">
    <ul class="banners">
        <li><img /></li>
        <li><img /></li>
    </ul>

    <ul class="pagination"></ul>

    <div class="next">Next</div>
    <div class="prev">Previous</div>
</div>
4

6 回答 6

7

在css中尝试这种方式

 .next{
    display:none !important;
  }

  .prev{
     display:none !important;
  }
于 2012-11-03T05:44:43.553 回答
4

确保最新的样式属性（即 html 中的最下方）是将可见性设置为无的属性。我认为添加到标签上的样式选项是最重要的。尝试将以下内容添加到您的标签中：

<tag style="visible:0;" ></tag>

如果这可行，那么您知道这是您的问题，这可能是一种解决方案，因为 JavaScript 稍后可能会在鼠标悬停时更改样式。

如果您的所有包含都在标题中，则将您的 CSS 样式表（将可见性设置为无）移到其他样式表之后可能会有所帮助，但如果您的 JavaScript 包含在页面底部，您可能必须编辑 JavaScript或移动它。

于 2012-11-01T04:41:59.027 回答
3

这个插件使用精灵来实现翻转效果。我认为快速解决方法是对按钮进行 Photoshop 以降低不透明度。

于 2012-10-31T16:59:07.723 回答
1

您可以尝试覆盖配置。我添加display: none,到您的代码中。不过我还没有测试过。

$slides.find('ul.banners').eq(0).carouFredSel({
    height: 360,
    items: {
        visible: 1
    },
    scroll: {
        easing: "easeInOutSine",
        duration: 1200
    },
    auto: {
        delay: 1000
    },
    prev: {
        display: none,
        button: $slides.find('.prev'),
        items: 1
    },              
    next:{
        display: none,
        button: $slides.find('.next'),
        items: 1
    },
    pagination: {
        container: $slides.find(".pagination"),
        keys: true,
        anchorBuilder: function(nr) { 
            return '<li><a href="#"><span>'+nr+'</span></a></li>'; 
        }
    }
});

您的 CSS 样式表是否包含在插件之后？您可以在插件执行后尝试通过 CSS 和/或 jquery/javascript 覆盖。

于 2012-11-05T08:20:45.490 回答
1

试试下面的一段代码：

$("#layout-main").hover(
    function(){
        $(".prev").fadeIn(500);
        $(".next").fadeIn(500);
        $(".pagination a").fadeIn(500);
    }, function(){
        $(".prev").fadeOut(500);
        $(".next").fadeOut(500);
        $(".pagination a").fadeOut(500);
    }
);
于 2013-09-11T15:36:53.693 回答
0

在 css 文件中使用这个简单的代码。

.carousel .carousel-control { 可见性：隐藏；} .carousel：悬停 .carousel-control { 可见性：可见；}

于 2014-12-08T04:29:31.600 回答