希望大家一切都好。这是我的基本代码:
在这个演示中,当我们悬停在id为“container”的div上时,一个class为“nav”的div淡入。但问题是,之后如果我在class为“nav”的div上悬停鼠标,该div会淡出并再次淡入,如果我在.nav div内稍微移动鼠标,它会反复重复此行为。我不希望在我们悬停在.nav div上或在此div内移动鼠标时出现这种行为。
谢谢,对我的糟糕英语表示抱歉。
希望大家一切都好。这是我的基本代码:
在这个演示中,当我们悬停在id为“container”的div上时,一个class为“nav”的div淡入。但问题是,之后如果我在class为“nav”的div上悬停鼠标,该div会淡出并再次淡入,如果我在.nav div内稍微移动鼠标,它会反复重复此行为。我不希望在我们悬停在.nav div上或在此div内移动鼠标时出现这种行为。
谢谢,对我的糟糕英语表示抱歉。
试一试
$(document).ready(function(){
$("#containerNav").hover(
function() { $('.nav').stop(true, true).fadeIn(); },
function() { $('.nav').stop(true, true).fadeOut(); }
);
});
从http://api.jquery.com/stop/获取。
我改变了标记,添加了一个包含的div,这可以阻止触发鼠标离开事件。
<div id="containerNav">
<div class="nav"><a class="prev" href="#">Prev</a> <a class="next" href="#">Next</a> </div>
<div id="container">
Some Content in Container
</div>
</div>
现在当你悬停在控件上时,你不会执行鼠标离开操作,这会导致闪烁。
hover
中使用两个函数,因为你可以使用.fadeToggle()
,像这样(我还稍微更新了一下CSS)。 - mekwall