如何实现鼠标悬停时旋转Font Awesome图标且不旋转文本？

嘿，这个问题我之前也碰到过！原因很简单——你把Font Awesome图标和文本放在了同一个<i>标签里，所以当鼠标悬停时，整个元素（包括里面的文本）都会跟着触发旋转动画。要实现仅图标旋转、文本保持不动的效果，只需要把图标和文本拆分成独立的元素就可以啦！

修改后的HTML代码 #

把原来合在一起的标签拆分开，用一个容器包裹图标和文本：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <span class="icon-container">
    <i class="fa fa-car"></i>
    <span>This is a car.</span>
  </span>
</body>
</html>

对应的CSS代码 #

调整样式，只针对图标元素添加hover旋转效果：

/* 给图标设置过渡动画，保证旋转更平滑 */
.icon-container i {
  transition: 1s all;
}

/* 鼠标悬停在容器上时，仅让图标旋转 */
.icon-container:hover i {
  transform: rotate(360deg);
}

为什么这样有效？ #

拆分元素后，图标和文本属于两个独立的节点，我们通过CSS选择器精准地给图标添加hover动画，文本所在的<span>不会受到影响。另外把过渡效果放在图标本身而不是hover状态里，还能保证鼠标移出时图标能平滑地转回去，体验更好~

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