JQuery 触发元素上的 MouseMove

Question

我试图实现由 div 触发的鼠标移动，我认为问题出在这行代码中：[_ $('.mousePointer')。 css({left:e.pageX, top:e.pageY})_] 因为鼠标移动的位置是由整个页面的大小触发的，对吧？如何在不同 div 上激活 mousemove 并在不同 div 上更改指针中的 img？我希望我能解释这个问题。我想使用鼠标移动作为每个 post

的标题

body{
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  background-color: #800f62;
}

.headerz{
  background-color: grey;
  max-height: 120px;
}

.headerz img{
  width: 80px;
  margin: 10px;
}

.wrapper{
  margin-bottom: 100px;
}

.content{
  background-color: purple;
  min-height: 200px;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.Post_container{
  color: white;
  margin: 5%;
  background-color: #620c75;
  min-width: 80%;
  min-height: 400px;
  border-radius: 10px 10px 10px 10px;
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;


}

/*try follower mouse*/
.mousePointer{
  width: 50px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9999;

}
/*Fine Mouse Follow*/

footer{
  background: #121212;
  padding: 5px 0;
  position: fixed;
  left: 0;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 65px;
  box-shadow: 0px 0px 08px black;

}

.footer-container{
  max-width: 100%;
  margin: auto;
  padding: 0 20px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap-reverse;

}


.social-media{
  margin: 20px 0;
}

.social-media a{
  color: white;
  margin: 20px;
  font-size: 33px;
  text-decoration: none;
  transition: .3s linear;
}

.social-media a:hover{
  color: purple;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js">  </script>
    <link rel="stylesheet" href="DigiArch_may20200.css">
    <link rel="stylesheet" href="try.js">

    <title>Digital Archive Update May 2020</title>
  </head>
  <body>
  <div class="headerz">
    <img src="1E_Alpha.png" alt="">
  </div>


<div class="wrapper">

  <div class="content">

    <div class="mousePointer" ><img src="https://i.ibb.co/sQXKSH1/1e-Alpha.png" alt="1e-Alpha" border="0" style="width:100px"></div>


<script type="text/javascript">
  $(document).mousemove(function(e){
    $('.mousePointer').css({left:e.pageX, top:e.pageY})
  })
</script>
    <div class="Post_container"  style="background-image: url(https://lh3.googleusercontent.com/HA4mqBRa6t03RGDnEYUL3kuqWxsc1yNMJEgo9EetoKEabEqFASgcIPM89Ec8xSG6HosGD4xi03-C1zEnv54gH2VnV_fnr3k6V_LXrUlSImKsW-jWQrTbhBkXtdLTh8Sg70UEiLvGzA=s200-p-k); ">
      Post
    </div>
  </div>



  <div class="content" >
    <div class="Post_container"  style="background-image: url(https://lh3.googleusercontent.com/HA4mqBRa6t03RGDnEYUL3kuqWxsc1yNMJEgo9EetoKEabEqFASgcIPM89Ec8xSG6HosGD4xi03-C1zEnv54gH2VnV_fnr3k6V_LXrUlSImKsW-jWQrTbhBkXtdLTh8Sg70UEiLvGzA=s200-p-k); ">
      Post1
    </div>
  </div>


<footer>
  <div class="footer-container">
      <div class="social-media">
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-soundcloud"></i></a>
        <a href="#"><i class="fab fa-behance"></i></a>
        <a href="#"><i class="fab fa-twitch"></i></a>
        <a href="#"><i class="fab fa-paypal"></i></a>
      </div>
  </div>
</footer>

  </body>
</html>

Answer 1

问题出在文档上。它以整个页面为目标，而您需要的是将其集中在 .Post_container 上，因为它是图像的容器。差不多就这些了。

$(".Post_container").mousemove(function(e){ //======> replaced document with container class
  $('.mousePointer').css({left:e.pageX, top:e.pageY})
})

希望对您有所帮助:)

JQuery 触发元素上的 MouseMove

JQuery MouseMove on triggered element

javascript

jquery

mousemove

mouse-cursor