Question

我环顾了一下我想要达到的目标，但我找不到合适的答案。

基本上我无法使代码正确检测鼠标进入和离开与另一个div重叠的div。这是我目前的情况：

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＆＃39; s z-index。这样，当前悬停的框具有比.inner-box更高的z指数：

.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

jQuery鼠标进入/离开没有正确检测悬停区域

1 个答案: