CSS是前端開發中必不可少的一部分，其中最常用的就是懸浮樣式了。在設計網頁時，加入懸浮樣式可以提升用戶體驗，增加頁面的互動性。下面介紹四種常見的CSS懸浮樣式。

.hover{
background-color: #ccc;
}
.hover:hover{
background-color: #aaa;
}

第一種是hover狀態下改變背景顏色。當鼠標懸浮在元素上時，通過:hover選擇器來改變元素的樣式。可以根據需求改變元素的大小、顏色、邊框等樣式。

.img-hover{
transform: scale(1.1);
}
.img-hover:hover{
transform: scale(1.3);
}

第二種是hover狀態下放大圖片。通過transform屬性的scale方法可以實現放大圖片效果。當鼠標懸浮在圖片上時，將圖片縮放比例從原來的1.1倍變為1.3倍。

.tooltip{
position: relative;
}
.tooltip:hover::after{
content: "這是提示信息";
position: absolute;
bottom: 130%;
left: 50%;
transform: translateX(-50%);
padding: 5px;
background-color: #000;
color: #fff;
border-radius: 5px;
}

第三種是hover狀態下顯示提示信息。通過偽元素::after來實現，設置position屬性為absolute可以使提示信息在父元素內相對定位。通過bottom、left屬性來控制提示信息的出現位置，通過padding、background-color、color和border-radius等屬性來設置提示信息的樣式。

.collapse{
height: 0;
overflow: hidden;
transition: height 0.5s;
}
.collapse:hover{
height: 100%;
}

第四種是hover狀態下展開元素。這種方法的實現是將要展開的元素高度設置為0，通過overflow:hidden屬性隱藏元素。當鼠標懸浮在容器上時，通過改變高度實現元素的展開。通過transition屬性來實現平滑展開效果。