CSS懸浮出現圖標是一種非常常見的效果，在網站設計中應用也比較廣泛。這種效果能夠在用戶鼠標懸浮時，顯示出一個隱藏的圖標或者文本，從而豐富了網頁的交互體驗。

// html部分
圖標
這是一段隱藏的文本
// css部分
.container {
position: relative; /* 父容器設置relative，子元素才能用absolute定位 */
}
.icon {
font-size: 20px; /* 可能需要根據實際情況調整大小 */
}
.hidden-text {
position: absolute;
left: 50%; /* 讓隱藏的文本居中顯示 */
top: 50%;
transform: translate(-50%, -50%);
background-color: #000;
color: #fff;
padding: 10px;
border-radius: 5px;
opacity: 0; /* 初始是不可見的 */
transition: opacity .3s ease-in-out; /* 過渡動畫，使得出現和隱藏更加自然 */
}
.container:hover .hidden-text {
opacity: 1; /* 鼠標懸浮時，將隱藏文本的不透明度設置為1，就可以看到了 */
}

如上所述，通過在父容器上設置position: relative，再在子元素上設置position: absolute，并通過hover事件控制子元素的opacity值，就能實現CSS懸浮出現圖標的效果。當然，一些細節部分可以根據實際需求進行調整，例如圖標的大小、字體樣式、背景色等等。