悬停元素的目标子元素（animejs）

Question

我有这些元素：

<a class="parent">
  <span class="child"></span>
</a>

我只想在父元素悬停时定位子元素。所以，我尝试了 jQuery:

$('.parent').hover(function(){

  let child = $(this).children('.child'); // select child of $(this)

  anime({
    targets: child,
    translateX: 250,
  });

});

这行不通。我的猜测是 animejs can't target jQuery elements.

那么，有没有可能用vanilla JS来实现呢？我的意思是，我可以 select 悬停元素的子元素与普通 JS 吗？

Answer 1

我明白了。使用 JS 节点列表

let elements = document.querySelectorAll('.parent'); // create a nodelist of elements

elements.forEach(listeners); // iterate the node list

// Finally, add listeners to each node of nodelist
function listeners(currentIndex) {
  currentIndex.addEventListener('mouseover', function() {
    let child = currentIndex.getElementsByClassName('child')

    anime({
      targets: child,
      translateX: 250,
    });
  });
}

悬停元素的目标子元素（animejs）

Target child element of hovered element (animejs)

javascript

jquery

anime.js