jquery - 无法让 jQuery 鼠标悬停与 Span 一起使用

Question

我有以下代码:

        $('.popUp').mouseover(function() {
            var divName = $(this).data("id");
            $('#' + divName).fadeIn();
        });

        $('.popUp').mouseout(function() {
            var className = $(this).data("id");
            $('#' + divName).fadeOut();
        });

它应该在一些悬停在上面的文本附近显示一个弹出窗口。要显示的文本存储在页面其他位置的隐藏 DIV 中。我通过 SPAN 标记中的 data-id="divname"传递 DIV 的名称。问题是，无论我做什么，jQuery 都不会对文本使用react。不是鼠标悬停、悬停、甚至单击。没有什么。我通过在其中放置一个alert()来测试它，只是为了看看是否会使用react，但它永远不会使用react。

以下是其中一个 SPAN 的示例:

I am <span class="popUp" data-id="s1"><u>employed</u>, volunteering</span>, or 
<span class="popUp" data-id="s2"><u>associated</u></span>

我做错了什么？ :)

谢谢!

Answer 1

您尚未发布 div 的标记，但假设与此类似:

I am <span class="popUp" data-id="s1"><u>employed</u>, volunteering</span>, or 
<span class="popUp" data-id="s2"><u>associated</u></span>

<div id="s1">The s1 div</div>
<div id="s2">The s2 div</div>

变量名称从 className 更改为 divName 它工作正常。

DEMO - 默认，变量名称修复后

正如原始代码的评论中提到的，确保您的脚本在文档就绪 block 中运行，并确保任何 jQuery 引用都存在且有效。

此外，如果您发现当鼠标在链接之间快速移动时动画表现不稳定，您可以更新与此类似的代码:

$('.popUp').mouseover(function() {
    var divName = $(this).data("id");
    $('#' + divName).stop(true, true).fadeIn();
});

$('.popUp').mouseout(function() {
    var divName = $(this).data("id");
    $('#' + divName).hide();
});​

DEMO - 使用 stop() 和 hide()

的替代代码

我添加/更改的唯一内容(您可能根本不需要)是 stop(true, true) ，如果您将鼠标快速悬停在链接上来回移动，则会停止之前的动画。

此外，hide() 可能比 fadeOut() 效果更好，这也是因为当鼠标在链接之间快速移动时可能会与动画发生冲突。

这些只是建议，可能并不直接适用于您的场景。