преобразование jQuery в Vanilla JS

Question

Мне нужна помощь в преобразовании этого jQuery в чистый JavaScript. Это последний, который мне нужно преобразовать, чтобы я мог полностью удалить jQuery из своего проекта.

function hoverFunc(e) {
  gsap.to(ball, {duration: 0.3, opacity: 1, scale: 0});
  gsap.to(ball, {duration: 0.3, scale: 0.5});
}

function unhoverFunc(e) {
  gsap.to(ball, {duration: 0.3, opacity: 1, scale: 1});
  gsap.to(ball, {duration: 0.3, scale: 1});
}

$("a").hover(hoverFunc, unhoverFunc);

Answer 1

Вы можете использовать querySelectorAll и addEventListener для наведения указателя мыши / выхода мыши как

 var atags= document.querySelectorAll('a');

    atags.forEach(function(a) {
      a.addEventListener('mouseover', hoverFunc);
      a.addEventListener('mouseleave', unhoverFunc);
    })

Answer 2

Просто хотел проиллюстрировать пример Хиена встроенным примером кода, чтобы вы могли запустить приведенный ниже фрагмент кода и увидеть, как он работает. Здесь я добавил 3 ссылки, а функция зависания добавляет к ссылке 2 отдельных класса, которые затем удаляются функцией отмены наведения.

var atags= document.querySelectorAll('a');

function hoverFunc(e) {
  e.target.classList.add('hover', 'test')
}
function unhoverFunc(e) {
  e.target.classList.remove('hover', 'test')
}

atags.forEach(function(link) {
  link.addEventListener('mouseover', hoverFunc);
  link.addEventListener('mouseleave', unhoverFunc);
})

a {
  display: inline-block;
  padding: 1rem;
}
a.hover {
  background-color: rebeccapurple;
  color: white;
}
a.test {
  border: 3px solid black;
}

<a href="/">Link 1</a>
<a href="/">Link 2</a>
<a href="/">Link 3</a>

Answer 3

Примерно так должно работать

function hoverFunc(e) {
  gsap.to(ball, {duration: 0.3, opacity: 1, scale: 0});
  gsap.to(ball, {duration: 0.3, scale: 0.5});
}

function unhoverFunc(e) {
  gsap.to(ball, {duration: 0.3, opacity: 1, scale: 1});
  gsap.to(ball, {duration: 0.3, scale: 1});
}

var a = documet.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
  a[i].mouseover = hover;
  a[i].mouseout = unhover;
}