如何在鼠标悬停时在 bootstrap 中的图像上设置动画

Question

我想在我的网站上的图像上设置动画，当鼠标悬停在图像上时。但我不想使用 CSS。有没有bootstrap class可以直接给item做动画的？

Answer 1

这取决于你想如何完成它。

Bootstrap可以给元素添加动画吗？否

Boostrap 只是一个 UI 库，其中包含一些预制组件，可帮助您更快且一致地构建网站。

有什么简单的方法可以做到这一点吗？是

方法 1：使用普通 CSS

.my-image:hover {
   /* Your custom animation here */
}

方法二：使用JavaScript

yourElement.addEventListener("mouseover", (e) => {
     e.target.classList.add("your CSS class");
});

并删除动画

yourElement.addEventListener("mouseleave", (e) => {
     e.target.classList.remove("your CSS class");
});

将添加的 class 示例

.rotate-js {
   /* Your custom animation here */
}

值得考虑阅读的好文档：

W3SCHOOLS 鼠标悬停事件：onmouseover Event

MDN mouseleave 事件：mouseleave event

注意： 有一些库可以帮助您实现 heavy/advanced 动画，例如 GSAP 和 anime.js，如果您愿意，请试一试有兴趣。

how to set an animation on image in bootstrap when mouse hover