我正在尝试向我的 wordpress 网站添加一个鼠标跟踪效果。我做到了,但我不知道如何将效果添加到特定行。
简短介绍,我对CSS语言有所了解,但对HTML和JS一无所知。这就是我所做的:
创建鼠标跟踪效果后,我尝试使用 CSS 将其添加到特定行(添加到类 ball
静态和绝对位置),但它不起作用。所以我创建了一个新的 row ID
(#container),
假设将类 ball
应用于新的行 ID,但我不知道该怎么做。
HTML:
<h1>Giovanni</h1>`
<div class="ball">
</div>
JS:
<script type="text/javascript">
document.addEventListener("mousemove",function (event) {
const mouseX = event.pageX
const mouseY = event.pageY
const ball = document.querySelector("div.ball")
ball.style.left = mouseX + "px"
ball.style.top = mouseY + "px"
})
</script>
鼠标跟踪效果还可以,但是整个页面都是。
最佳答案
它适用于整个页面,因为您使用 document.
将它绑定(bind)到整个文档。
您需要定位 dom 中的正确元素,在本例中使用:document.getElementByClassName("ball");
因为您定位的是某个类名,如果您想使用您将使用的 ID document.getElementById("ball");
其中 document.
返回整个页面,这两个函数返回整个文档中具有指定类或 id 的元素。
<h1>Giovanni</h1>`
<div class="ball"></div>
<script type="text/javascript">
var el = document.getElementByClassName("ball"); //select the div with ball class
el.addEventListener("mousemove",function (event) {
const mouseX = event.pageX
const mouseY = event.pageY
const ball = document.querySelector("div.ball")
ball.style.left = mouseX + "px"
ball.style.top = mouseY + "px"
})
</script>
关于javascript - 如何将鼠标跟踪效果添加到特定的 wordpress 行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56868207/