如何使图像出现在悬停/活动链接下方？答案

【问题标题】：How to make an image appear beneath a hover/active link?如何使图像出现在悬停/活动链接下方？
【发布时间】：2019-04-19 01:11:09
【问题描述】：

我目前有一个带有links like this 的导航栏，并且我想要一个悬停/活动状态，其中一个图像出现在链接like this 下方。这个怎么写？

【问题讨论】：

【解决方案1】：

只需使用 css ::after 伪元素即可完成。

html

<ul>
  <li class="item" data-icon="❤️">menu text</li>
</ul>

css

.item:hover::before {
  content: attr(data-icon);
}

在这种情况下，您可以将任何 emoji 用于图标这是完整的example

【讨论】：

【解决方案2】：

有不止一种方法可以做到这一点，最简单和最不引人注目的是非 JS 解决方案。

我正在从 cdn 加载字体真棒徽标

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

然后标记中的链接如下所示：

<a class="active" href="#">Home<i class="fa fa-home"></i></a>

这里我将 i 元素的不透明度设置为 0 并给它一个过渡：

i {
color: violet;

opacity: 0;
position: relative;
left: 20px;

transition: all 0.5s;
}

最后，你在悬停时设置链接的属性，你可以在 CSS 中使用 ">"

a:hover > i {
opacity: 1;
transform: rotate(360deg);
}

就是这样，这是一个链接：

【讨论】：