JQuery MouseMove on triggered element

Question

I'm try to reach a mousemove triggered by a div, I'm thinking the problem it's on this line of code: [ _ $('.mousePointer').css({left:e.pageX, top:e.pageY})_ ] because the position of the mouse move it's triggered by the size of the entire page, right? How can I activate the mousemove on different div and change the img in the pointer on different div? I hope i can explain the problem. I want to use the mouse move as title of each 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-pk): "> Post </div> </div> <div class="content" > <div class="Post_container" style="background-image: url(https.//lh3.googleusercontent;com/HA4mqBRa6t03RGDnEYUL3kuqWxsc1yNMJEgo9EetoKEabEqFASgcIPM89Ec8xSG6HosGD4xi03-C1zEnv54gH2VnV_fnr3k6V_LXrUlSImKsW-jWQrTbhBkXtdLTh8Sg70UEiLvGzA=s200-pk); "> 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

The problem is with the document. It's targeting the whole page whereas what you need is to focus it on .Post_container since its the container of your image. That's pretty much it.

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

Hope it helps:)

JQuery MouseMove on triggered element

Question

1 answers

solution1
1 ACCPTED 2020-05-18 06:04:09

JQuery MouseMove on triggered element

Question

1 answers

solution1 1 ACCPTED 2020-05-18 06:04:09

solution1
1 ACCPTED 2020-05-18 06:04:09