jquery 悬停元素的目标子元素(animejs)

5ssjco0h 于 2022-11-22 发布在 jQuery

关注(0)|答案(2)|浏览(131)

我有这些要素：

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

我希望仅在父元素处于悬停状态时才指向子元素。

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

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

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

});

我猜animejs不能以jQuery元素为目标。
那么，有没有可能用vanilla JS来实现呢？我的意思是，我可以用vanilla JS来选择悬停元素的子元素吗？

jquery

来源：https://stackoverflow.com/questions/62559828/target-child-element-of-hovered-element-animejs

2条答案

按热度按时间

eimct9ow1#

我知道了。使用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,
    });
  });
}

赞(0）回复(0）举报 2022-11-22

iq3niunx2#

您仍然可以使用JQuery来激活hover侦听器，但关键是要为anime.js找到正确的目标。

$('.parent').hover(function(){
  anime({
    targets: this.querySelector('.child'),
    translateX: 250,
  });
});

this选择器指向的是被悬停的父元素。2代码将翻译所有包含“child”类的元素。
希望这对你有帮助--我自己在寻找答案的时候偶然发现了这个问题！

赞(0）回复(0）举报 2022-11-22

我来回答

jquery 悬停元素的目标子元素(animejs)

2条答案

相关问题

热门标签

最新问答