CSS擁有豐富的樣式屬性，可以實(shí)現(xiàn)各種效果。其中，通過純CSS懸停切換內(nèi)容是一種比較常見的效果。下面我們來看具體實(shí)現(xiàn)方法。

/*HTML代碼*/
<div class="box">
<div class="content1">內(nèi)容1</div>
<div class="content2">內(nèi)容2</div>
</div>
/*CSS代碼*/
.content2 {
display:none;
}
.box:hover .content1 {
display:none;
}
.box:hover .content2 {
display:block;
}

首先，在HTML中我們需要有一個(gè)容器，這里是一個(gè)class名為“box”的塊元素。在這個(gè)容器中，我們需要建立兩個(gè)內(nèi)容容器，“content1”和“content2”。其中，“content2”初始狀態(tài)下為不顯示。

在CSS中，我們首先將“content2”的顯示設(shè)置為none。這樣，頁(yè)面首次加載時(shí)只會(huì)顯示“content1”的內(nèi)容。然后，通過鼠標(biāo)懸停于“box”容器上的方式，利用CSS選擇器中的“:hover”來實(shí)現(xiàn)對(duì)“content1”和“content2”之間的切換。當(dāng)鼠標(biāo)懸停在“box”容器上時(shí)，“content1”容器的顯示設(shè)置為none，而“content2”的顯示設(shè)置為block，這樣就完成了內(nèi)容的切換效果。