jQuery mouseenter/mouseleave html()-swap问题

Question

我有以下Javascript/jQuery函数：

function addEventHandler(){

    $("div").mouseenter(function() {
        $(this).html("Over");
    }).mouseleave(function() {
        $(this).html("Out");
    });

}

它起作用了，但并不完美。divs有时会稍微重叠(不要问)，当下面的图片试图传达时，它们并不总是得到"Out“值。这种情况会发生，尤其是当我很快地将指针移过它们的时候。

​

​

有什么办法确保每个div都能在mouseleave上得到"Out“值吗？谢谢!

更新:真实代码摘录

由于我的真正函数不像上面的例子那么简单，所以我在这里包含了真实函数的确切代码：

function addEventHandlers(){

    var originalContent = "";

    $(".countryspots div").mouseenter(function() {

        var thisClass = $(this).attr("class");
        var thisCountry = thisClass.split(" ");
        var thisNumber = getNumber(thisCountry[1]);

        originalContent = $(this).children("a").html();

        $(this).children("a").html("<span>" + thisNumber + "</span>");


    }).mouseleave(function() {

        $(this).children("a").html(originalContent);

    });

}

我的HTML标记是这样的：

<div class="countryspots">
    <div class="america brazil"><a href="#"><span>Brazil</span></a></div>
    <div class="america argentina"><a href="#"><span>Argentina</span></a></div>
    <div class="europe ireland"><a href="#"><span>Ireland</span></a></div>
    <div class="europe portugal"><a href="#"><span>Portugal</span></a></div>
</div>

一般的想法是，最内部的<span>中的国家名称与mouseenter上代表员工的数字(从getNumber();检索)交换，然后在mouseleave上交换回来。

真正的问题是，当我将指针移到另一个div时，许多div会保留他们的员工号。换句话说：mouseleave事件并不是在所有的div上执行的。

实况示例： http://jsfiddle.net/N9YAu/4/

希望这能有所帮助。再次感谢！

Answer 1

您的问题是，对于一个变量，您只有一个变量来存储所有项的“原始内容”，而且可以在mouseenter处理程序之前第二次调用mouseleave处理程序，从而使值“原始内容”变量被悬停内容覆盖。

您应该在脚本开始时将原始内容存储一次，并为每个项目分别存储它们。我在下面的示例中使用jQuery的data函数完成了此操作：http://jsfiddle.net/N9YAu/5/

注意，我已经将您单独的mouseenter/mouseleave绑定替换为一个hover绑定。这可能是相同的，但这是“适当的方式”去做它。

Answer 2

我无法重现这个问题：

http://www.jsfiddle.net/N9YAu/1/

你在那儿也会这样吗？

Answer 3

这些div中的任何一个可能会嵌套在HTML中的其他div中吗？

我在想，也许这可能是因为鼠标指针进入顶级div，而不是在进入其他级别时“离开”，因为它们是顶级div的子类(尽管它们已经被绝对定位)。