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

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 样式添加一些 !important 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 .