jQuery mouseenter / mouseleave html（）-swap问题

Question

我有以下Javascript / jQuery函数：

function addEventHandler(){

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

}

它有效，但并非完美。 div有时会稍微重叠（不要问），并且如下图所示，它们并不总是获得“ 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时却没有“离开”，因为它们是顶层的孩子（即使它们的位置绝对正确）。