html - 链接悬停时的动画图标

Question

我正在尝试实现在悬停文本链接时图标稍微向右移动的动画效果。目前，如果直接指向该图标，它会显示它的动画，但我想知道是否有一种方法可以连接这两者(文本和图标)。

请考虑以下代码:

li {
  list-style-type: none;
}

i {
  padding-left: 10px;
}

.space {
  padding: 5px;
}

.moving-left i {
  position: relative;
  transition: transform 0.3s ease;
  transform: translateX(0px);
}

.moving-left i:hover {
 transform: translateX(10px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">

<div>
  <ul>
    <li class="space moving-left"><a href="#">Link 1<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 2<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 3<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 4<i class="fas fa-chevron-right"></i></a></li>
  </ul>
</div>

Answer 1

试试下面的代码。只需移动到 .movi​​ng-left:hover i，您就可以告诉 css 在悬停类后对 i 执行特定操作。你几乎拥有它。

希望这对您有所帮助!

li {
  list-style-type: none;
}

i {
  padding-left: 10px;
}

.space {
  padding: 5px;
}

.moving-left i {
  position: relative;
  transition: transform 0.3s ease;
  transform: translateX(0px);
}

.moving-left:hover i {
 transform: translateX(10px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">

<div>
  <ul>
    <li class="space moving-left"><a href="#">Link 1<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 2<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 3<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 4<i class="fas fa-chevron-right"></i></a></li>
  </ul>
</div>