CSS是頁面布局中不可缺少的一部分，可以通過CSS控制頁面中的各種元素的樣式和排版。其中，懸浮效果是非常常見的一種，通過設置:hover屬性，可以實現當鼠標懸浮在某個元素上時改變其樣式。

.example {
background-color: blue;
color: white;
padding: 10px;
transition: background-color 0.5s ease;
}
.example:hover {
background-color: red;
color: black;
}

在上述代碼中，我們創建了一個類名為example的元素，并設置了其背景顏色為藍色，文字顏色為白色，內邊距為10px。同時，我們也設置了元素上的過渡效果，使其在改變背景顏色時可以平滑過渡。

接下來，我們通過:hover偽類來實現當鼠標懸浮在該元素上時改變其樣式。在:hover偽類中，我們將背景顏色改為紅色，文字顏色改為黑色，從而實現了在鼠標懸浮時改變元素樣式的效果。

除了改變背景顏色和文字顏色外，CSS還可以通過懸浮效果實現其他樣式的改變，如改變元素的大小、形狀、邊框等。通過合理運用:hover偽類，可以讓網站頁面變得更加生動有趣。