在網頁設計中，如何讓頁面更加生動？除了圖片外，如何給文字、圖標、按鈕等元素增加更多的交互體驗？這時就需要用到CSS的鼠標經過效果了。

在CSS中，我們可以使用:hover選擇器實現鼠標經過時的效果。比如給一個div設置背景色，當鼠標移動到該div上時，改變其背景顏色。

div:hover {
background-color: #FFA07A;
}

是不是非常簡單？下面，我們再來看一個更加有趣的例子：讓文本框出現和消失的效果。

input[type="text"] {
padding: 5px;
border: 1px solid #999999;
}
input[type="text"]:focus~div {
display: block;
}
div {
display: none;
margin-top: -10px;
padding: 10px;
border: 1px solid #999999;
}

在上述代碼中，我們為文本框設置了樣式，當其獲得焦點時（即鼠標點擊輸入框），讓下方的div出現。而在div的樣式中，我們設置了它一開始不可見（display:none），當input獲得焦點時才顯示出來（input:focus~div）。

好了，現在我們已經學會了使用CSS的:hover和~選擇器來實現鼠標經過效果和增加交互體驗。在實際應用中，我們可以將這些效果運用到各種元素上，讓頁面更加生動、有趣。