仅处理mouseenter一次

时间：2017-12-11 20:16:19

标签： javascript jquery html css

我已经创建了一个自定义光标效果。我希望在特定mouseenter及其子项中的<div>事件后使用它。它有效但即使我不离开<div>，它也会在每次移动后显示和隐藏。我希望在悬停后只有一个开始，并在mouseleave之后停止。

代码在这里：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("#rowek")
    .mouseenter(function(event) {
      $("#follower").show();
    })
    .mouseleave(function() {
      $("#follower").hide();
    });

});

$(document).ready(function() {
  (function() {
    var follower, init, mouseX, mouseY, positionElement, printout, timer;

    follower = document.getElementById('follower');

    printout = document.getElementById('printout');

    mouseX = (event) => {
      return event.pageX;
    };

    mouseY = (event) => {
      return event.pageY;
    };



    positionElement = (event) => {
      var mouse;
      mouse = {
        x: mouseX(event),
        y: mouseY(event)
      };
      follower.style.top = mouse.y + 'px';
      return follower.style.left = mouse.x + 'px';
    };

    timer = false;

    window.onmousemove = init = (event) => {
      var _event;
      _event = event;
      return timer = setTimeout(() => {
        return positionElement(_event);
      }, 1);
    };

  }).call(this);
});
＆＃13; 
.rowek-bgr {
  background-color: #313343;
  display: flex;
  justify-content: center;
}

.child {
  padding: 15px;
  width: auto!important;
}

.child-txt {
  font-size: 18px;
  font-weight: 300;
  text-transform: uppercase;
  color: white;
}

.child-special-txt {
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  color: white;
}

#follower {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
}

#follower #circle1 {
  position: absolute;
  -webkit-animation: pulse 2s infinite;
  /* Chrome, Safari, Opera */
  animation: pulse 2s infinite;
  background: #fff;
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}

#follower #circle2 {
  position: absolute;
  -webkit-animation: pulse 4s infinite;
  /* Chrome, Safari, Opera */
  animation: pulse 4s infinite;
  background: rgba(200, 0, 0, 0.8);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}

@-moz-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}

@-webkit-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}

@-o-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}

@keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="rowek">
  <div class="col-md-12 rowek-bgr">
    <div class="col-md-2 child">
      <span class="child-txt">Test</span> <span class="child-special-txt">for adults</span>
    </div>
    <div class="col-md-2 child">
      <span class="child-txt">Test</span> <span class="child-special-txt">for childrens</span>
    </div>
    <div class="col-md-2 child">
      <span class="child-txt">Test</span> <span class="child-special-txt">for students</span>
    </div>
    <div class="col-md-2 child">
      <span class="child-txt">Test</span> <span class="child-special-txt">for grands</span>
    </div>
  </div>
</div>

<div id="follower">
  <div id="circle1"></div>
  <div id="circle2"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

Live demo

2 个答案:

答案 0 :(得分：2)

问题是你正在使用的div效果;它在鼠标下面并在其后面的元素之前捕获事件，然后当你移动它时再次触发事件，因为鼠标再次在背景元素上。

解决问题的一种方法是将pointer-events: none;添加到#follower元素的CSS中。

此外，不是问题的一部分，但由于您使用的是jQuery，因此您应该将其用于所有事件处理，而不是混合使用纯JavaScript事件。

$(document).ready(function() {
  $("#rowek")
    .mouseenter(function() {
      $("#follower").show();
    })
    .mouseleave(function() {
      $("#follower").hide();
    });

});

$(document).ready(function() {
    var follower, init, mouseX, mouseY, positionElement, printout, timer;

    follower = document.getElementById('follower');

    printout = document.getElementById('printout');

    mouseX = (event) => {
      return event.pageX;
    };

    mouseY = (event) => {
      return event.pageY;
    };



    positionElement = (event) => {
      var mouse;
      mouse = {
        x: mouseX(event),
        y: mouseY(event)
      };
      follower.style.top = mouse.y + 'px';
      return follower.style.left = mouse.x + 'px';
    };

    timer = false;

  $(window).mousemove(function(_event){
      return timer = setTimeout(() => {
        return positionElement(_event);
      }, 1);    
  })  
});
.rowek-bgr {
  background-color: #313343;
  display: flex;
  justify-content: center;
}

.child {
  padding: 15px;
  width: auto!important;
}

.child-txt {
  font-size: 18px;
  font-weight: 300;
  text-transform: uppercase;
  color: white;
}

.child-special-txt {
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  color: white;
}

#follower {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  pointer-events: none;
}

#follower #circle1 {
  position: absolute;
  -webkit-animation: pulse 2s infinite;
  /* Chrome, Safari, Opera */
  animation: pulse 2s infinite;
  background: #fff;
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}

#follower #circle2 {
  position: absolute;
  -webkit-animation: pulse 4s infinite;
  /* Chrome, Safari, Opera */
  animation: pulse 4s infinite;
  background: rgba(200, 0, 0, 0.8);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}

@-moz-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}

@-webkit-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}

@-o-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}

@keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="rowek">
  <div class="col-md-12 rowek-bgr">
    <div class="col-md-2 child">
      <span class="child-txt">Test</span> <span class="child-special-txt">for adults</span>
    </div>
    <div class="col-md-2 child">
      <span class="child-txt">Test</span> <span class="child-special-txt">for childrens</span>
    </div>
    <div class="col-md-2 child">
      <span class="child-txt">Test</span> <span class="child-special-txt">for students</span>
    </div>
    <div class="col-md-2 child">
      <span class="child-txt">Test</span> <span class="child-special-txt">for grands</span>
    </div>
  </div>
</div>

<div id="follower">
  <div id="circle1"></div>
  <div id="circle2"></div>
</div>

答案 1 :(得分：0)

首先你不需要在#follower上使用超时 当鼠标悬停时，你可以获得每个孩子的位置 所以我删除了你的部分代码

seconde，用你的方法，当鼠标悬停在孩子身上时，＃folower会显示但只是在鼠标下面，所以脚本会在folower child上调用mouseleve，所以folwer会隐藏juste之后 这是一个快速的递归动作

`$(document).ready(function() {
    var follower = $('#follower');

    $("#rowek .child").each(function(){
        $(this).hover(function(event) {
            var offset = $(this).offset();
            $("#follower").show().css({top : offset.top+$(this).height()+50, left : offset.left+(($(this).width()/2)+10)});
            event.preventDefault();
        }, function(event) {
            $("#follower").hide();
            event.preventDefault();
        })
    });

});`
   .rowek-bgr {
    background-color: #313343;
    display: flex;
    justify-content: center;
}

.child {
    padding: 15px;
    width: auto!important;
}

.child-txt {
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    color: white;
}

.child-special-txt {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    color: white;
}

#follower {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
}

#follower #circle1 {
    position: absolute;
    -webkit-animation: pulse 0.5s infinite;
    /* Chrome, Safari, Opera */
    animation: pulse 0.5s infinite;
    background: #ffb83f;
    border-radius: 50%;
    height: 0em;
    width: 0em;
    margin-top: 0em;
    margin-left: 0em;
}

#follower #circle2 {
    position: absolute;
    -webkit-animation: pulse 0.7s infinite;
    /* Chrome, Safari, Opera */
    animation: pulse 0.8s infinite;
    background: rgba(200, 0, 0, 0.5);
    border-radius: 50%;
    height: 0em;
    width: 0em;
    margin-top: 0em;
    margin-left: 0em;
}

@-moz-keyframes pulse {
    0% {
        opacity: 0.2;
        height: 1em;
        width: 1em;
        margin-top: -0.5em;
        margin-left: -0.5em;
    }
    50% {
        opacity: 0.9;
        height: 3em;
        width: 3em;
        margin-top: -1.5em;
        margin-left: -1.5em;
    }
    100% {
        opacity: 0.2;
        height: 1em;
        width: 1em;
        margin-top: -0.5em;
        margin-left: -0.5em;
    }
}

@-webkit-keyframes pulse {
    0% {
        opacity: 0.2;
        height: 1em;
        width: 1em;
        margin-top: -0.5em;
        margin-left: -0.5em;
    }
    50% {
        opacity: 0.9;
        height: 3em;
        width: 3em;
        margin-top: -1.5em;
        margin-left: -1.5em;
    }
    100% {
        opacity: 0.2;
        height: 1em;
        width: 1em;
        margin-top: -0.5em;
        margin-left: -0.5em;
    }
}

@-o-keyframes pulse {
    0% {
        opacity: 0.2;
        height: 1em;
        width: 1em;
        margin-top: -0.5em;
        margin-left: -0.5em;
    }
    50% {
        opacity: 0.9;
        height: 3em;
        width: 3em;
        margin-top: -1.5em;
        margin-left: -1.5em;
    }
    100% {
        opacity: 0.2;
        height: 1em;
        width: 1em;
        margin-top: -0.5em;
        margin-left: -0.5em;
    }
}

@keyframes pulse {
    0% {
        opacity: 0.2;
        height: 1em;
        width: 1em;
        margin-top: -0.5em;
        margin-left: -0.5em;
    }
    50% {
        opacity: 0.9;
        height: 3em;
        width: 3em;
        margin-top: -1.5em;
        margin-left: -1.5em;
    }
    100% {
        opacity: 0.2;
        height: 1em;
        width: 1em;
        margin-top: -0.5em;
        margin-left: -0.5em;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="rowek">
  <div class="col-md-12 rowek-bgr">
    <div class="col-md-2 child">
      <span class="child-txt">Test</span> <span class="child-special-txt">for adults</span>
    </div>
    <div class="col-md-2 child">
      <span class="child-txt">Test</span> <span class="child-special-txt">for childrens</span>
    </div>
    <div class="col-md-2 child">
      <span class="child-txt">Test</span> <span class="child-special-txt">for students</span>
    </div>
    <div class="col-md-2 child">
      <span class="child-txt">Test</span> <span class="child-special-txt">for grands</span>
    </div>
  </div>
</div>

<div id="follower">
  <div id="circle1"></div>
  <div id="circle2"></div>
</div>

相关问题
最新问题