css - 悬停在其他东西上时添加悬停效果

Question

我有一个带有 <a> 的导航栏在 <a> 里面当我将鼠标悬停在文本上时，我想让图标翻译。这是代码。

<div class="nav-bar">
    <div class="button">
        <a href="index.html"> <i class="fas fa-sign-out-alt icon"></i> Go back</a>
    </div>
</div>

到目前为止我试过这个:

.button:hover ~ i {
    transform: translateX(-3px);
}

Answer 1

链接是 .button div 的子元素，i 是它的子元素，所以:

.button:hover a i {
transform: translateX(-3px);
}

.button:hover a i {
  transform: translateX(-10px);
  /* wildly exaggerated */
  display: inline-block;
  /* required to transform inline elements */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" />
<div class="nav-bar">
  <div class="button">
    <a href="index.html"> <i class="fas fa-sign-out-alt icon"></i> Go back</a>
  </div>
</div>