当鼠标悬停在卡片 (div) 上时,我只想为图像设置动画,而不是卡片本身。我该怎么做?
计划是在将鼠标悬停在卡片上时让图像动画反弹,并且只有图像而不是卡片或里面的文字。
另外,我使用 next/image 作为图像。
普通的 CSS,我会嵌套 css 并且它会工作,这可以用 TailwindCSS 完成吗?
提前致谢
答案 0 :(得分:0)
试试这个,虽然还没有测试过,但想法是将孩子嵌套在父级中:
.parent:hover > .child {
animation: bounce 1s infinite;
}
@keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-15px);
}
}