仅使用 TailwindCSS 将图像悬停在 div 内答案

【问题标题】：Only hover image inside a div with TailwindCSS仅使用 TailwindCSS 将图像悬停在 div 内
【发布时间】：2021-09-30 02:45:31
【问题描述】：

我想在将鼠标悬停在卡片 (div) 上而不是卡片本身上时只为图像制作动画。我该怎么做呢？

计划是在将鼠标悬停在卡片上时让图像动画反弹，并且只有图像而不是卡片或里面的文本。

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

普通的 CSS，我会嵌套 css，它会工作，可以用 TailwindCSS 完成吗？

提前致谢

【问题讨论】：

标签： css next.js tailwind-css

【解决方案1】：

试试这个，虽然还没有测试过，但想法是将孩子嵌套在父母中：

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

【讨论】：

我不明白为什么不