的jQuery的mouseenter /鼠标离开HTML（） - 交换问题

我有以下的Javascript/jQuery函数：的jQuery的mouseenter /鼠标离开HTML（） - 交换问题

function addEventHandler(){ 

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

}

它的工作原理，但并不完美。 div有时会略微重叠（不要问），正如下面的图片试图表达的那样，它们并不总是得到“Out”值。特别是当我将指针移动到非常快时，会发生这种情况。

alt text

任何想法如何确保每个格沾到鼠标离开了“内外兼修”的价值？谢谢！

UPDATE：真正的代码摘录

由于我的真正功能并不像上面的例子一样简单，我已经包含在这里的真正功能的确切代码：

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>

总的想法是，在最内层国名10与代表mouseenter（取自getNumber();）的员工交换数字 - 然后在mouseleave上换回。

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

活生生的例子：http://jsfiddle.net/N9YAu/4/

希望这有助于。再次感谢！

来源

2010-11-26 o01