HTML / CSS使图标转换为网站菜单中的文本

Question

所以我，就像你们所有人在我的网站上都有一个菜单栏（标题）一样 最近发现了如何使用图标。

现在我需要的是一个菜单，它首先只显示图标，当你将鼠标悬停在文本上时（例如HOME，SHOP等）显示在图标右侧。

使用css的任何方式？

THX！

Answer 1

是的，您可以使用CSS执行此操作。

以下是一个例子：

创建<span>课程：<span class="hideBeforeShow"></span>。

<ul>
    <li><span class="hideBeforeShow">Test</span></li>
</ul>

接下来，请确保使用visibility: hidden;隐藏课程：

li .hideBeforeShow
{
    visibility: hidden;
    padding-left: 7px;
    padding-right: 7px;
}

（添加填充以将其与图标分开）

接下来，当您将鼠标悬停在<li></li>元素上时，您会想要显示它。将鼠标悬停在它上面后，您可以通过以后添加类名来选择它：

li:hover .hideBeforeShow
{
    visibility: visible;
}

接下来，您需要隐藏图标。将内容设置为空，或隐藏图像，无论您想做什么。

li:hover:after
{
    font-family: none;
    content '';
}

您可以将这些'font-awesome'图标替换为图像。同样的概念适用。

这是jsFiddle示例。玩它。