CSS懸浮變成藍色

/* HTML代碼 */
<div class="box"></div>
/* CSS代碼 */
.box {
width: 100px;
height: 100px;
background-color: red;
}
.box:hover {
background-color: blue;
}

以上代碼展示了如何使用CSS將鼠標懸浮在一個紅色的盒子上時，它會變成藍色。這是一種常見的效果，在網站設計中使用較多。

我們首先使用HTML創建一個class為"box"的div元素。然后，我們使用CSS設置這個盒子有一個紅色的背景。

接下來，我們使用:hover偽類選擇器來設置hover狀態下的盒子顏色。在這種情況下，我們希望鼠標懸停在盒子上時，背景顏色從紅色變為藍色。

使用CSS :hover偽類是一種非常簡單但也非常有用的方法，可以增強網站設計中的互動性。通過選擇不同的CSS屬性，我們可以創建出各種各樣的效果，與網站訪客互動。