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

Question

我有四個div，box1，box2，box3和box4，並使用rotate使它們按順序重疊。我使用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添加simlarily。你可以進一步優化這個使用邏輯。我只添加了「>」符號，因爲懸停效果僅限於直接包裝類div的兒童版本。