你好，我的项目需要建议；我正在创建一个带有fa图标(箭头(的按钮，它将在悬停时旋转90*，我有一个fa图标旋转，当图标本身悬停时可以工作，但我有问题，我希望箭头旋转，无论我在按钮元素上悬停在哪里。
我希望当你悬停在整个按钮上时，箭头可以旋转，而不仅仅是箭头本身。
我感谢您的帮助和您的奉献时间：(
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Raleway';
}
body {
color: #fff;
font-family: "Raleway";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0px;
overflow-x: hidden;
text-align: center;
}
/* video */
body > header > div {
position: absolute;
width: 100%;
height: 100%;
}
body > header > div > div.video-container{
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
overflow: hidden;
}
body > header > div > div.video-container > video{
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 50vw;
min-width: 485vw;
min-height: 150vh;
transform: translate(-50%, -50%);
}
/* video txt */
body > header > div > div.video-overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: 'Raleway';
display: flex;
}
body > header > div > div.video-overlay > h1 > span{
color: #e31b6d;
}
body > header > div > div.video-container:after{
position: absolute;
top: 0;
left: 0;
display: block;
content: '';
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
body > header > div > div.video-overlay > h1 > span > p{
margin-top: 20px;;
}
body > header > div > div.video-overlay > h1{
font-size: 32pt;
line-height: 36pt;
}
body > header > div > div.video-overlay > p{
font-size: 32pt;
line-height: 36pt;
}
/* button */
body > header > div > div.video-overlay > div{
border: 2px solid #fff;
box-sizing: inherit;
cursor: pointer;
display: inline-block;
font-size: 13pt;
padding: 10px 20px;
transition: all 0.5s;
}
body > header > div > div.video-overlay > div:hover{
background-color: rgb(4, 194, 201);
border-color: rgb(4, 194, 201);
}
.page-link {
cursor: pointer;
}
body > header > div > div.video-overlay > div > i{
margin-left: 10px;
transition: transform 0.3s;
}
body > header > div > div.video-overlay > div > i{
content: "F054";
vertical-align: middle;
}
body > header > div > div.video-overlay > div > i:hover {
t -webkit-transform: rotate(45deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<title>Tomasz Topor</title>
</head>
<body>
<header>
<div class="wrapper">
<div class="video-container">
<video autoplay muted loop>
<source src="film/pulse.mp4" type="video/mp4">
</video>
</div>
<div class="video-overlay"> <h1>Hello, I'm <span>Thomas Topor.</span></h1>
<p>I'm a fornt-end web developer.</p>
<br>
<br>
<div class="button page-link">
View my work
<i class="mdi fas fa-arrow-right"></i>
</div>
</div>
</header>
</body>
</html>编辑：
要实现您想要的输出，只需更新以下内容：
body > header > div > div.video-overlay > div > i:hover {
t -webkit-transform: rotate(45deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
对此：
body > header > div > div.video-overlay > div:hover > i {
t -webkit-transform: rotate(45deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
通过这种方式，您将鼠标悬停在按钮上的图标作为目标，而不仅仅是图标。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Raleway';
}
body {
color: #fff;
font-family: "Raleway";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0px;
overflow-x: hidden;
text-align: center;
}
/* video */
body > header > div {
position: absolute;
width: 100%;
height: 100%;
}
body > header > div > div.video-container{
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
overflow: hidden;
}
body > header > div > div.video-container > video{
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 50vw;
min-width: 485vw;
min-height: 150vh;
transform: translate(-50%, -50%);
}
/* video txt */
body > header > div > div.video-overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: 'Raleway';
display: flex;
}
body > header > div > div.video-overlay > h1 > span{
color: #e31b6d;
}
body > header > div > div.video-container:after{
position: absolute;
top: 0;
left: 0;
display: block;
content: '';
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
body > header > div > div.video-overlay > h1 > span > p{
margin-top: 20px;;
}
body > header > div > div.video-overlay > h1{
font-size: 32pt;
line-height: 36pt;
}
body > header > div > div.video-overlay > p{
font-size: 32pt;
line-height: 36pt;
}
/* button */
body > header > div > div.video-overlay > div{
border: 2px solid #fff;
box-sizing: inherit;
cursor: pointer;
display: inline-block;
font-size: 13pt;
padding: 10px 20px;
transition: all 0.5s;
}
body > header > div > div.video-overlay > div:hover{
background-color: rgb(4, 194, 201);
border-color: rgb(4, 194, 201);
}
.page-link {
cursor: pointer;
}
body > header > div > div.video-overlay > div > i{
margin-left: 10px;
transition: transform 0.3s;
}
body > header > div > div.video-overlay > div > i{
content: "F054";
vertical-align: middle;
}
body > header > div > div.video-overlay > div:hover > i {
t -webkit-transform: rotate(45deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<title>Tomasz Topor</title>
</head>
<body>
<header>
<div class="wrapper">
<div class="video-container">
<video autoplay muted loop>
<source src="film/pulse.mp4" type="video/mp4">
</video>
</div>
<div class="video-overlay"> <h1>Hello, I'm <span>Thomas Topor.</span></h1>
<p>I'm a fornt-end web developer.</p>
<br>
<br>
<div class="button page-link">
View my work
<i class="mdi fas fa-arrow-right"></i>
</div>
</div>
</header>
</body>
</html>