Javascript Anim.js-当我只想触发悬停的元素时，作为目标输入什么

我正在尝试使用anime.js为名为.grid item的div中的元素设置动画 这是一个简单的悬停动画，当用户悬停时，文本和图标在其中进行动画。.grid项在ManStory网格中被复制，这是它全部崩溃的地方。当然，我们的想法是只有悬停的.grid项的子项受到影响。此时所有的.grid项都被触发

当我删除anime函数并使用$（this）操作CSS属性时，一切都正常。我似乎不知道在动画功能中输入什么作为目标。任何帮助都将不胜感激

html

试试这个：

$('.grid-item').hover(function() {
   anime ({
   targets: [this.querySelector('.tl-item-image'), this.querySelector('.another-element')],
   scale: 1.1,
   opacity: 0.6,
   easing: 'easeInOutQuart',
   duration: 700 
  });
}, function() {
   anime ({
   targets: [this.querySelector('.tl-item-image'), this.querySelector('.another-element')],
   scale: 1,
   opacity: 1,
   easing: 'easeInOutQuart',
   duration: 700 
   });
});

显然，如果不需要设置多个内部元素的动画，请删除

、此.querySelector（'.other element'）

和方括号

我使用了

this.querySelector

，因为

this

指的是当前悬停的

网格项。我使用
querySelector
来选择子元素，这也是因为anime是一个Javascript库，除了jQuery对象之外，它没有其他功能

演示：

$('.grid-item').hover(function() {
   anime ({
   targets: ['.tl-item-image', this],
   scale: 1.1,
   opacity: 0.6,
   easing: 'easeInOutQuart',
   duration: 700 
  });
}, function() {
   anime ({
   targets: ['.tl-item-image', this],
   scale: 1,
   opacity: 1,
   easing: 'easeInOutQuart',
   duration: 700 
   });
});

$('.grid-item').hover(function() {
   anime ({
   targets: [this.querySelector('.tl-item-image'), this.querySelector('.another-element')],
   scale: 1.1,
   opacity: 0.6,
   easing: 'easeInOutQuart',
   duration: 700 
  });
}, function() {
   anime ({
   targets: [this.querySelector('.tl-item-image'), this.querySelector('.another-element')],
   scale: 1,
   opacity: 1,
   easing: 'easeInOutQuart',
   duration: 700 
   });
});