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

Posted 2023-03-06

【中文标题】如何将鼠标跟踪效果添加到特定的 wordpress 行？

【英文标题】：How to add mouse-tracking effect to specific wordpress row?

【发布时间】：2019-11-14 00:44:24

【问题描述】：

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

鼠标跟踪效果还可以，但会覆盖整个页面。

【参考方案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>