Question

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

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

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

我知道IE的旧版本中存在一个常见错误，但我也看到这种情况发生在Chrome和Firefox中。

这是jsfiddle。

有什么想法吗？

Answer 1

jsFiddle demo

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

以下是修正：

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

Answer 2

使用CSS类切换框高度，并确保您的悬停状态仅存在于该类中。

.box {
 height: 0;
}

.box span {
 display: none;
}

.box.open {
 height: 400px;
}

.box.open:hover span {
 display: block;
}

元素从鼠标下移出后（在所有浏览器中），悬停状态为粘性

2 个答案:

jsFiddle demo