多個div重疊時如何組織事件

Question

我有四個div，box1，box2，box3和box4，並使用rotate使其按順序重疊。 當鼠標懸停在目標開發人員上時，我使用了jquery hover功能來顯示某些提示，但是我發現該事件是混亂且受干擾的。 如何處理該事件並防止一個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的直接子級。