如何用CSS:hover伪类实现FontAwesome图标添加fa-flip类翻转

你原来的CSS写法有两个明显问题：

• CSS没办法直接修改HTML元素的类名或者结构，你写的CSS规则完全不符合语法规范
• 选择器写错了，你把图标类绑到了body的属性选择器上，实际要操作的是<i>标签的图标元素

下面给你两种靠谱的解决办法：

方法一：纯CSS实现翻转（不用依赖fa-flip类） #

直接用CSS的transform属性在hover时实现翻转，还能自定义动画效果：

<body>
  <i class="fa-solid fa-user"></i>
</body>

.fa-solid.fa-user:hover {
  transform: scaleX(-1); /* 水平翻转，换成scaleY(-1)就是垂直翻转 */
  transition: transform 0.3s ease; /* 加个过渡动画，翻转更丝滑 */
}

方法二：用JS动态切换fa-flip类 #

如果你一定要用FontAwesome自带的fa-flip类，那就用JavaScript监听鼠标事件来动态添加/移除类：

<body>
  <i class="fa-solid fa-user" id="user-icon"></i>
</body>

const userIcon = document.getElementById('user-icon');

userIcon.addEventListener('mouseover', () => {
  userIcon.classList.add('fa-flip');
});

userIcon.addEventListener('mouseout', () => {
  userIcon.classList.remove('fa-flip');
});

FontAwesome的fa-flip类本身带翻转动画，用这种方法也能实现动态效果。

内容的提问来源于stack exchange，提问作者Arishorts