Question

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

Answer 1

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

html

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

css

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

在这种情况下，您可以仅使用任何emoji作为图标这是完整的example

Answer 2

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

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

df['COLUMN1'].apply(lambda x: x.decode("utf-8"))

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

在这里，我将i元素的不透明度设置为0并为其进行过渡：

void print_matrix(char s[], size_t rows, size_t cols, double m[rows][cols])
{
    printf("%s =\n", s);
    for (size_t i = 0; i < rows; i += 1)
    {
        for (size_t j = 0; j < cols; j += 1)
         {
            printf("%lf ", m[i][j]);
         }
         printf("\n");
    }
}

最后，您设置悬停链接的属性，可以使用“>”

来填充CSS中的子元素

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

仅此而已，这是一个链接：

https://codepen.io/damPop/pen/zMzBGN?editors=0110

如何使图像显示在悬停/活动链接下方？

2 个答案: