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

尝试以下代码。只需将鼠标移到.moving-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>

链接悬停时的动画图标

1 个答案: