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添加相似的内容。您可以使用逻辑进一步优化它。我添加了“＆gt;”符号只是因为悬停效果仅限于直接子类的换行类div ..

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

1 个答案: