多个div重叠时如何组织事件

Question

我有四个div，box1、box2、box3和box4，并使用旋转让它们按顺序重叠。我使用 jquery hover 函数在鼠标悬停在目标 dev 上时显示某些提示，但我发现该事件很混乱，并且受到干扰。如何处理事件并防止一个 div 事件影响另一个。 这是我的代码：

html:

<div class="wrap">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>

css:

 .wrap {
    width: 400px;
    height: 400px;
    position:relative;

-webkit-perspective: 700px;
-moz-perspective: 700px;
-ms-perspective: 700px;
perspective: 700px;
 }
 .wrap div {
    position:absolute;
    left:50%;top:50%;

     -webkit-transform: rotateX(69deg) rotateY(0deg) rotateZ(0deg) scaleX(.73) scaleY(.73) scaleZ(1);
-moz-transform: rotateX(69deg) rotateY(0deg) rotateZ(0deg) scaleX(.73) scaleY(.73) scaleZ(1);
-ms-transform: rotateX(69deg) rotateY(0deg) rotateZ(0deg) scaleX(.73) scaleY(.73) scaleZ(1);
transform: rotateX(69deg) rotateY(0deg) rotateZ(0deg) scaleX(.73) scaleY(.73) scaleZ(1);
 }
.box1 {
    width:400px;
    height:400px;
    margin-left: -200px;margin-top:-200px;
}
.box2 {
    width:300px;
    height:300px;
    margin-left: -150px;margin-top:-150px;
}
.box3 {
    width:200px;
    height:200px;
    margin-left: -100px;margin-top:-100px;
}
.box4 {
    width:100px;
    height:100px;
    margin-left: -50px;margin-top:-50px;
}

js:

$(".wrap div").hover(function(event){
    console.log(event.currentTarget);
},function(event) {
    console.log(event.currentTarget);
});

Answer 1

尝试基于类名的悬停效果。

    $(".wrap > .box1 ").hover(function(){
         console.log("hover in "+event.currentTarget);
     },function(){
    console.log("hover out "+event.currentTarget);
 });

$(".wrap > .box2 ").hover(function(){
      console.log("hover in "+event.currentTarget);
       },function(){
      console.log("hover out "+event.currentTarget);
 });

您可以为 box3 和 box4 添加类似的内容。您可以使用逻辑进一步优化它。我只添加了“>”符号，因为悬停效果仅限于直接子类的包装类 div ..