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

2022-01-22 00:00:00 hover jquery css

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

I have a div that shows a series of slides, one at a time. It contains a link at the bottom of the box that triggers the switch to the next slide. When the link is clicked the box shows the next slide and the height of the box changes most of the time.

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

I have a :hover style applied to the link, however once the box's height changes and the link is moved out from under the mouse it keeps its :hover state until it is hover again.

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

I've tried calling .mouseleave() and .mouseenter().mouseleave() after the change has finished, but it doesn't have any effect. I also created a different :active & :focus state for the link, which I can see a flash of when the link is clicked, but then it returns to the :hover. A :visited style has no effect either.

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

I know there is a common bug in older versions of IE similar to this, but I'm seeing this happen in Chrome and Firefox as well.

这是一个 jsfiddle.

有什么想法吗?

推荐答案

jsFiddle 演示

答案很简单.当我们松开鼠标点击页面跳转显示内容，所以浏览器默认行为.注册 mouseleave 和切换类错过了.

jsFiddle demo

The answer is pretty simple. As we release the mouse click the page jumps to reveal content, so the browser default behav. to register mouseleave and toggle class is missed.

以下是修复:

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

相关文章