javascript - 使用 JQuery mousemove 函数时留在 DIV 中

Question

我希望内圈在移动时保持在外圈内。内圈应该仍然是动画的。我尝试使用 overflow: hidden，但没有用。如果有人能给我建议就太好了。提前致谢!

$(document).mousemove(function( event ) {
 $(".cursor-circle, .cursor-inner-wrap").css({
     "top": (event.pageY - 65) + "px",
     "left": (event.pageX - 65) + "px"
    });
});

body {
  background: rgb(20,20,20);
}

.cursor-circle{
   border: 1px solid white;
   border-radius: 100%;
   width: 120px;
   height: 120px;
   overflow: hidden;
   position: absolute;
   transition-duration: 200ms;
   transition-timing-function: ease-out;
}

.cursor-wrap{
    width: 120px;
    height: 120px;
    position: absolute;
}

.cursor-inner-wrap{
  width: 120px;
  height: 120px;
  position: absolute;
  display: flex;
  align-items: center;
}

.cursor-inner {
    position: absolute;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #fff;
}

.cursor-inner{
  width: 20px;
  height: 20px;
  background: white;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  border-radius: 100%;
  transition-duration: 199ms;
  transition-timing-function: ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor-wrap">
  <div class="cursor-circle"></div>
  <div class="cursor-inner-wrap">
    <div class="cursor-inner"></div>
  </div>
</div>

Answer 1

由于 .cursor-circle 有过渡，而 .cursor-inner-wrap 没有。所有更改都会立即影响 .cursor-inner-wrap，而圆圈需要时间才能到达同一位置。将过渡从 .cursor-inner 移动到 .cursor-inner-wrap，并将过渡的持续时间设置为略小于圆形的持续时间:

$(document).mousemove(function(event) {
  $(".cursor-circle, .cursor-inner-wrap").css({
    "top": (event.pageY - 65) + "px",
    "left": (event.pageX - 65) + "px"
  });
});

body {
  background: rgb(20, 20, 20);
}

.cursor-circle {
  border: 1px solid white;
  border-radius: 100%;
  width: 120px;
  height: 120px;
  position: absolute;
  transition: 200ms ease-out;

}

.cursor-inner-wrap {
  display: flex;
  width: 120px;
  height: 120px;
  position: absolute;
  align-items: center;
  justify-content: center;
  transition: 140ms ease-out;
}

.cursor-inner {
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor-wrap">
  <div class="cursor-circle"></div>
  <div class="cursor-inner-wrap">
    <div class="cursor-inner"></div>
  </div>
</div>