Question

我正试图在我的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>

鼠标跟踪效果还可以，但可以遍及整个页面。

Answer 1

它适用于整个页面，因为您是使用document.将其绑定到整个文档的。

您需要在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>

如何为特定的wordpress行添加鼠标跟踪效果？

1 个答案: