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

Question

I have four divs, box1, box2, box3 and box4, and use rotate to let them overlap by order. i use jquery hover function to show certain tips when mouse is over the target dev, but i find that the event is chaotic，and disturbed. how to handler the event and prevent one div event affect the other. Here is my code:

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

Try the hover effect based on class name.

    $(".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);
 });

You can add simlarily for box3 and box4. You can further optimize this using logic. I have add ">" symbol only because the hover effect is limited to direct child's of wrap class div only..