元素从鼠标下移出后(在所有浏览器中),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; }