7

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

我:hover对链接应用了一种样式，但是一旦框的高度发生变化并且链接从鼠标下方移出，它就会保持其:hover状态，直到它再次悬停。

我试过打电话.mouseleave()，.mouseenter().mouseleave()在更改完成后，但它没有任何效果。我还为链接创建了一个不同的:active&:focus状态，当链接被点击时我可以看到一个闪烁的状态，但随后它返回到:hover. :visited样式也没有效果。

我知道在旧版本的 IE 中存在与此类似的常见错误，但我在 Chrome 和 Firefox 中也看到了这种情况。

这是一个jsfiddle。

有任何想法吗？

4

2 回答 2

2

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
});
于 2012-04-26T15:15:15.227 回答
-1

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

.box {
 height: 0;
}

.box span {
 display: none;
}

.box.open {
 height: 400px;
}

.box.open:hover span {
 display: block;
}
于 2015-08-06T08:00:00.003 回答