Question

我练习HTML并遇到问题。
首先，我的代码：

＆＃13;

i:hover{
  transform: rotate(360deg);
  transition: 1s all;
}
i{
  transition: 1s all;
}

＆＃13;

<!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>
	<i class="fa fa-car">This is a car.</i>
</body>
</html>

＆＃13;

当我将鼠标悬停在图标和文字上时，我想让我的图标旋转，但是当我将鼠标悬停在此代码上时，整个文字都会旋转。如果不旋转整条生产线，我该如何让我的汽车旋转？我必须在此使用javascript吗？

Answer 1

旋转创建图标的伪元素：

＆＃13;

i:hover::before {
  transform: rotate(360deg);
}

i:before {
  display: inline-block;/* mandatory to be able to use transform */
  transition: 1s all;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i class="fa fa-car">This is a car.</i>

＆＃13;

如何在悬停时旋转字体 - 真棒图标而不旋转文本？

1 个答案: