javascript - 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 后面的绿色 div 时立即触发，而我希望红色 div 在鼠标完全离开时消失。

我也尝试过为 inner-box 类使用 :hover 选择器，但它具有完全相同的行为。你知道解决这个问题的好方法吗？

Answer 1

只需更改 .zommed-inner-box 上的 z-index 即可覆盖 .inner-box 的 z -索引。这样当前悬停的框具有比 .inner-box 更高的 z-index :

.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