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>

悬停在其他物体上时添加悬停效果

1 个答案: