鼠标悬停时Orbit ZURB jQuery淡入/淡出导航按钮 [英] Orbit ZURB jquery fade in/fade out navigation button on mouseover

问题描述

我正在使用jQuery图像滑块插件-Orbit.我正在尝试在鼠标悬停/鼠标悬停时显示/隐藏导航按钮.我设法做到了: http://jsfiddle.net/sherlock85/mZYX9/15/但是，当您将鼠标光标移到导航按钮上时，它会闪烁，并且不会更改幻灯片.

I'm using the jQuery image slider plugin - Orbit. I'm trying to show/hide navigation 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.

我将不胜感激.

推荐答案

使用以下代码.您必须为hover添加div.slider-nav:

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'});
});

.slider-nav的层位于#featured层的上方.当鼠标进入.slider-nav时，您将失去对#featured的关注，并且获得属性display:none.之后，焦点再次移到#featured上，该属性设置为display:block.看起来像是快速闪烁，因为每次您移动鼠标时都会重复一次.

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.

这篇关于鼠标悬停时Orbit ZURB jQuery淡入/淡出导航按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！