Orbit ZURB jquery fade in/fade out navigation button on mouseover

I'm using the jQuery image slider plugin - Orbit. I'm trying to show/hide navi开发者_如何学编程gation buttons on mouseover/mouseout. Somehow I managed to do so: http://jsfiddle.net/sherlock85/mZYX9/15/ But when you move your mouse cursor over a navigation button it blinks and it doesn't change the slide.

I would appreciate any help.

Use the following code. You have to add div.slider-nav for hover:

$("#featured, div.slider-nav").hover(function(){
  $("div.slider-nav").css({display:'block'});
}, function() {
  $("div.slider-nav").css({display:'none'});
});

The layer of .slider-nav is located over the #featured layer. You will lost the focus to #featured when the mouse enters .slider-nav and it get's the property display:none. After that the focus is now over #featured again and the property is set to display:block. It looks like fast blinking because this will be repeated every time you move your mouse.