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

Question

我有一个带有上一个/下一个箭头的弹性滑块,相当标准.我隐藏了页面加载上的箭头,只希望它们在用户将鼠标悬停在轮播信息上时显示.

这是我的代码:

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

这是一个有效的jsFiddle.