Как добавить эффект отслеживания мыши к определенной строке WordPress?

Question

Я пытаюсь добавить эффект отслеживания мыши на мой сайт WordPress.Я сделал это, но я не знаю, как добавить эффект к определенной строке.

Краткое введение, я кое-что знаю о языке CSS, но немного или совсем ничего о HTML и JS.Вот что я сделал:

После создания эффекта отслеживания мыши я попытался добавить его в конкретную строку с помощью CSS (добавив в класс ball статические и абсолютные позиции), ноэто не работаетПоэтому я создаю новый row ID (#container), предполагая применить класс ball к новому идентификатору строки, но я не понимаю, как это сделать.

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");, потому что вы нацеливаетесь на определенное имя класса, если вы хотите использовать идентификатор, вы бы использовали document.getElementById("ball");

Где document. возвращает всю страницу, эти две функции возвращают из всего документа элементы с указанными классами или идентификаторами.

<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>