CSS是現(xiàn)代網(wǎng)頁設(shè)計(jì)中必不可少的一部分，它的靈活性讓我們能夠輕松地實(shí)現(xiàn)各種設(shè)計(jì)效果，包括在圖標(biāo)下面添加注釋。在下面的例子中，我們將學(xué)習(xí)如何使用CSS將一個(gè)圖標(biāo)和它的注釋組合在一起。
<div class="icon-container">
<i class="fa fa-search"></i>
<span class="icon-tooltip">Search</span>
</div>
.icon-container {
position: relative;
display: inline-block;
}
.icon-tooltip {
visibility: hidden;
width: 120px;
background-color: #000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
}
.icon-container:hover .icon-tooltip {
visibility: visible;
}首先，我們創(chuàng)建一個(gè)
元素，并給它一個(gè)帶有.icon-container類名的類。內(nèi)部，我們使用標(biāo)簽添加一個(gè)fontawesome搜索圖標(biāo)，并使用標(biāo)簽添加一個(gè)包含“搜索”文本的圖標(biāo)說明。然后，我們使用CSS將它們彼此掛鉤。
我們?cè)贑SS中給.icon-container類一個(gè)相對(duì)定位，并將.i元素和.icon-tooltip元素絕對(duì)定位。.icon-tooltip沒有保存計(jì)算后的位置，因此我們使用負(fù)邊距和一些left和bottom屬性來確保它始終位于其上方的圖標(biāo)下面。我們還將z-index設(shè)為1，以確保.tooltip在圖標(biāo)之上。
最后，我們使用:hover狀態(tài)選擇器為.icon-container元素定義一個(gè)鼠標(biāo)懸停事件，以顯示.icon-tooltip元素。這將覆蓋visibility:hidden樣式，使.tool-tip元素可見。
在完成這個(gè)簡(jiǎn)單的示例后，您現(xiàn)在可以輕松地在一個(gè)圖標(biāo)下方添加標(biāo)注，并以交互的方式顯示它們。這是CSS在設(shè)計(jì)中的一種威力。