的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