JQuery 鼠標移動觸發元素
[英]JQuery MouseMove on triggered element
問題描述
我試圖達到由 div 觸發的鼠標移動，我在想問題出在這行代碼上： [ _ $('.mousePointer').css({left:e.pageX, top:e.pageY })_ ] 因為鼠標移動的 position 是由整個頁面的大小觸發的，對吧？ 如何在不同的 div 上激活 mousemove 並在不同的 div 上更改指針中的 img？ 我希望我能解釋這個問題。 我想用鼠標移動作為每個帖子的標題
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>
1 個解決方案
解決方案1
1 已采納 2020-05-18 06:04:09
問題出在文檔上。 它針對整個頁面，而您需要將其集中在.Post_container上，因為它是圖像的容器。 差不多就是這樣。
$(".Post_container").mousemove(function(e){ //======> replaced document with container class
$('.mousePointer').css({left:e.pageX, top:e.pageY})
})
希望能幫助到你：）
jQuery mousemove淡入/淡出元素在元素鼠標懸停時取消淡入淡出
[英]jQuery mousemove fade in/out element cancel fade on element mouseover
如果在DOM中添加了新元素，則jQuery Drag繼續進行mousemove
[英]jQuery Drag continues with mousemove if a new element is being appended in DOM
jQuery 基於 mousemove 事件在 div 中查找最近的元素
[英]jQuery Find Closest Element Inside div Based on mousemove Event
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.