元素从鼠标下移出后(在所有浏览器中),hover状态为粘性

我有一个div,显示一系列幻灯片,一次一个。 它包含一个框底部的链接,触发切换到下一张幻灯片。 单击链接时,该框显示下一张幻灯片,并且框的高度在大部分时间都会更改。

我有一个:hover样式应用于链接,但是一旦框的高度发生变化并且链接从鼠标下移出,它将保持其:hover状态,直到它再次hover。

我已经尝试在更改完成后调用.mouseleave().mouseenter().mouseleave() ,但它没有任何效果。 我还为链接创建了一个不同的:active:focus状态,我可以看到点击链接时的闪光,然后它返回到:hover 。 答:visited风格也没有效果。

我知道IE的旧版本中有一个常见的错误类似于此,但我也看到这种情况发生在Chrome和Firefox中。

这是一个jsfiddle 。

有任何想法吗?

jsFiddle演示

答案很简单。 当我们释放鼠标时,单击页面跳转以显示内容,因此浏览器默认行为。 注册mouseleave并且错过了切换类。

以下是修复:

CSS:

 a:active, a:selected, a:visited { /* add his to remove stupid dotted outline */ border: none; outline: none; } 

JQ1:

  $('#prev-page').on('mousedown', function (e) { // use mousedown (some issues with chrome) e.preventDefault(); showPage(pages.index($($(this).attr('href')), 600)); }); $('#next-page').on('mousedown', function (e) { // here too! e.preventDefault(); showPage(pages.index($($(this).attr('href'))), 600); }); 

jQ2:

 pages.hide().eq(active).fadeIn(fadeTime, function () { // $('#next-page').trigger('mouseleave'); // remove to fix in FF }); 

使用CSS类切换框高度,并确保您的hover状态仅存在于该类。

 .box { height: 0; } .box span { display: none; } .box.open { height: 400px; } .box.open:hover span { display: block; }