悬停时 mouseenter mouseleave 的 jquery 问题答案

【问题标题】：jquery issue with mouseenter mouseleave on hover悬停时 mouseenter mouseleave 的 jquery 问题
【发布时间】：2012-10-29 20:31:21
【问题描述】：

我在元素悬停时遇到 jquery mouseenter / mouseleave 问题，其中内容不断闪烁。所以它有点工作，但它闪烁。

这是我的代码（准备就绪）：

myLinkElement.bind({
    mouseenter: function (e) {
        $(this).parent().removeClass("empty");
        $(this).parent().addClass("waiting");
        $(this).parent().find("#waitingText").html("hello");
        myContainerOverlay.stop(true, true).fadeIn();
    },
    mouseleave: function (e) {
        $(this).parent().addClass("empty");
        $(this).parent().removeClass("waiting");
        $(this).parent().find("#waitingText").html("");
        myContainerOverlay.stop(true, true).fadeOut();
    }
});

有什么建议吗？

【问题讨论】：

拼凑一个fiddle 来演示问题，并告诉我们您使用的浏览器是什么。
发布一些 HTML 或事件最好做一个 fiddle 展示你的问题。
mkLinkElement 是文本还是内联块？换句话说，什么是 CSS 显示设置。当您将其放在未设置为块或内联块的文本上时，我已经看到了这一点，因为该类修改了文本，现在鼠标不完全位于字母上。

标签： jquery mouseover mouseenter

【解决方案1】：

这是一个建议，但如果没有小提琴或任何 html，很难说它是否会起作用，这取决于最初设置元素的类和可见性等：

myLinkElement.on('mouseenter mouseleave', function() {
        $(this).parent().toggleClass('empty waiting').find("#waitingText").html("hello");
        myContainerOverlay.fadeToggle();        
});

或者不同的方法：

myLinkElement.on('mouseenter mouseleave', function(e) {
    var state = e.type=='mouseenter';
    $(this).parent().toggleClass('empty waiting')
           .find("#waitingText").html(state?"hello":"");
    myContainerOverlay[state?'fadeIn':'fadeOut']();
});

【讨论】：