仅在带有TailwindCSS的div中悬停图像

Question

我希望在将鼠标悬停在卡(div)而不是卡本身上时，只对图像进行动画处理。我该怎么做呢？

我们的计划是让图像动画-反弹时，悬停在卡片上，只有图像，而不是卡片或里面的文本。

另外，我使用next/image作为图像。

普通的CSS，我会嵌套css，它可以工作，这可以用TailwindCSS实现吗？

提前感谢

Answer 1

试一试，虽然还没有测试，但想法是将孩子嵌套在父元素中：

.parent:hover > .child {
    animation: bounce 1s infinite;
}
@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}