HTML/CSS 使圖標轉換為網站菜單中的文本

Question

所以我和你們所有人一樣在我的網站頂部有一個菜單欄（標題），並且最近發現了如何使用圖標。

現在我需要的是一個菜單，首先只顯示圖標，當你將鼠標懸停在文本上時（例如主頁、商店等）顯示在圖標的右側。

有什么辦法可以用 css 做到這一點？

謝謝！

Answer 1

是的，你可以用 CSS 做到這一點。

下面是一個例子：

創建一個<span>類： <span class="hideBeforeShow"></span> 。

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

接下來，確保您使用visibility: hidden;類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 '';
}

您可以用圖像代替這些“字體真棒”圖標。 同樣的概念也適用。

這是jsFiddle示例。 玩它。