Question

我有一个flex slider上一个/下一个箭头，相当标准。我隐藏了页面加载上的箭头，只希望它们在用户将鼠标悬停在轮播信息上时显示。

这是我的代码：

$(".flex-container.home ul.flex-direction-nav").hide();
$(".flex-container.home .flexslider").hover(
    function(){
        $(".flex-container.home ul.flex-direction-nav").fadeIn();
    },
    function(){
        $(".flex-container.home ul.flex-direction-nav").fadeOut();
    }
)

现在的问题是，当用户实际上悬停在箭头本身上时，它会淡出，因为从技术上讲，我要求它这样做。我试图在ul.flex-direction-nav css样式中添加一些重要的CSS，但它并没有阻止淡出的发生。

Answer 1

将您的代码更改为以下内容。我修改了您的选择器并使用 fadeToggle() 来节省您编写额外代码的费用。

这是新版本，它的工作方式与您所希望的相同：

$(document).ready(function () {
  $(".flex-container.home ul.flex-direction-nav").hide();
  $(".flex-container.home").hover(function () {
         $(" ul.flex-direction-nav").fadeToggle();
  });    
});

Here is a working jsFiddle

Answer 2

    pauseOnHover:true,  //this option working good

Answer 3

下面的CSS解决了我的问题 -

.big-slider .flex-direction-nav {opacity: 0 !important;}
.big-slider .flex-direction-nav:hover {opacity: 1 !important;}

在悬停时显示/隐藏flexslider上的控件？

3 个答案: