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

Question

我有一个带有 prev/next 箭头的flex 滑块，非常标准。我在页面加载时隐藏了箭头，只希望它们在用户将鼠标悬停在轮播信息上时出现。

这是我的代码：

$(".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();
    }
)

现在的问题是，当用户实际将鼠标悬停在箭头本身上时，它会淡出，因为从技术上讲，我要求它这样做。我尝试将一些 !important css 添加到 ul.flex-direction-nav 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();
  });    
});

这是一个工作 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;}