jQuery鼠標進入/離開沒有正確檢測到懸停區域

Question

我環顧了我想達到的目標，但我無法找到任何合適的答案。

基本上我不能讓代碼正確檢測鼠標進入和離開一個重疊另一個div的div。 這是我目前的狀況：

工作演示：http://jsfiddle.net/2f5xx73y/

HTML：

<div style='height: 100%; width: 100%;padding: 30%;'> 
    <div class='box'> 
     <div class='inner-box'>Merry xmas!</div> 
    </div> 
    <div class='box'> 
     <div class='inner-box'>Happy new year!</div> 
    </div> 
</div> 

CSS：

.box { 
    height: 100px; 
    width: 100px; 
    display: inline-block; 
    position: relative; 
    background-color: green; 
} 
.inner-box { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    opacity: 0; 
    z-index: 1; 
} 
.zoomed-inner-box { 
    height: 160%; 
    width: 160%; 
    top: -30%; 
    left: -30%; 
    position: absolute; 
    background-color: red; 
    z-index: 1; 
} 

JS：

$(".inner-box").mouseenter(function() { 
    $(this).attr("class", "zoomed-inner-box"); 
}); 

$(".inner-box").mouseleave(function() { 
    $(this).attr("class", "inner-box"); 
}); 

正如你所看到的那樣，有兩個盒子在與另一個盒子重疊時變得更大。 從右到左一切正常，事實上，只要鼠標離開它，紅色的div就會消失。這不會發生在相反的方向上，只要光標進入紅色背後的綠色div，就會觸發mouseleave事件，而當鼠標完全離開時，紅色div會消失。

我也嘗試使用:hover選擇器爲inner-box類，但它具有完全相同的行爲。你知道這個問題的一個很好的解決方案嗎？

Answer 1

只需將z-index更改爲.zommed-inner-box即可覆蓋.inner-box的z-index。這樣，目前徘徊箱具有較高的z-index比.inner-box：

.inner-box { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    opacity: 0; 
    z-index: 1; <---- original z-index 
} 

.zoomed-inner-box { 
    height: 160%; 
    width: 160%; 
    top: -30%; 
    left: -30%; 
    position: absolute; 
    background-color: red; 
    z-index: 2; <---- higher z-index 
} 

FIDDLE