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

【问题标题】：Target child element of hovered element (animejs)悬停元素的目标子元素（animejs）
【发布时间】：2020-06-24 16:32:15
【问题描述】：

我有这些元素：

<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 来实现呢？我的意思是，我可以用 vanilla JS 选择悬停元素的子元素吗？

【问题讨论】：

标签： javascript jquery anime.js

【解决方案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,
    });
  });
}

【讨论】：