CSS中的hover效果是一種常見的交互設計，它可以讓網頁更加生動有趣，增強用戶體驗。當鼠標移到某個元素上時，該元素的樣式會發生變化，成為hover狀態。

.button {
background-color: #008CBA;
color: white;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
.button:hover {
background-color: white;
color: #008CBA;
}

如上代碼所示，我們首先定義一個.button的樣式，包括背景色、文字顏色、內邊距以及圓角半徑，并設置了過渡效果。當鼠標移到.button上時，.button:hover的樣式會覆蓋原來的樣式，背景色變為白色，文字顏色變為藍色。

除了背景色和文字顏色外，hover效果還可以改變字體大小、邊框樣式、陰影效果、透明度等，可以根據自己的需要進行調整。

.img-wrap {
display: inline-block;
position: relative;
}
.img-wrap:hover .img-desc {
opacity: 1;
}
.img-desc {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 10px;
opacity: 0;
transition: opacity 0.3s;
}

上面的代碼演示了一個圖片與描述文字的效果，當鼠標移到圖片上時，描述文字的透明度變為1，實現了文字的漸顯效果。該代碼中使用了position屬性完成文字位置的定位，并且使用了transition屬性設置文字的過渡效果。

總的來說，CSS中的hover效果是一種常用的交互設計，可以通過變化樣式增強網頁的趣味性和用戶體驗。我們可以使用不同的屬性進行hover效果的設置，根據需要靈活調整樣式，讓網頁更加美觀和實用。