我有一个div，显示了一系列幻灯片，一次一个。 它包含在触发切换到下一张幻灯片框底部的链接。 当点击该链接的框显示下一张幻灯片和框的高度变化的大部分时间。
我有一个:hover应用于链接样式，但是一旦箱的高度的变化和链接从鼠标下移出它保持它的:hover状态，直到它再次徘徊。
我已经打过电话.mouseleave()和.mouseenter().mouseleave()变更完成后，但它不会有任何效果。 我还创建了一个不同:active和:focus您的链接，我可以看到该链接被点击时的闪光灯状态，但随后返回到:hover 。 一:visited风格也无济于事。
我知道有与此类似老版本的IE浏览器的一个共同的错误，但我看到这种情况发生在Chrome和Firefox也。
这里有一个的jsfiddle 。
有任何想法吗？
答案很简单。 当我们松开鼠标点击页面跳转到显示内容，所以浏览器默认behav。 注册鼠标离开并切换类错过。
下面是修正：
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类切换框的高度，并确保只存在该类您的悬停状态。
.box {
height: 0;
}
.box span {
display: none;
}
.box.open {
height: 400px;
}
.box.open:hover span {
display: block;
}
