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

时间:2021-07-22 20:43:47

标签: css next.js tailwind-css

当鼠标悬停在卡片 (div) 上时,我只想为图像设置动画,而不是卡片本身。我该怎么做?

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

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

普通的 CSS,我会嵌套 css 并且它会工作,这可以用 TailwindCSS 完成吗?

提前致谢

1 个答案:

答案 0 :(得分:0)

试试这个,虽然还没有测试过,但想法是将孩子嵌套在父级中:

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