Show/hide controls on flexslider on hover?

flexslider, javascript, jquery, jquery-plugins

Solution

Change your code to the following. I've modified your selectors and used fadeToggle() to save you writing extra code.

Here is the new version, which works how you specified you would like:

$(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.

Problem

I have a flex slider with prev/next arrows, pretty standard. I hide the arrows on the page load and only want them to appear when the user hovers over the carousel info. Here's my code: ``` $(".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(); } ) ``` The problem now is that when the user actually hovers over the arrow itself, it fades out, since technically I'm asking it to do so. I've tried to add some !important css to the ul.flex-direction-nav css styles but it doesn't stop the fade out from happening.

Original source