CSS是一種可以設置網頁元素樣式的語言，我們可以利用CSS來設置DIV切換效果，讓網頁看起來更加美觀。下面我們就來看看如何實現。

/*先設置DIV的基本樣式*/
div{
position:relative;
width:100%;
height:500px;
}
/*設置兩個DIV的樣式*/
.div1{
position:absolute;
top:0;
left:0;
width:100%;
height:500px;
background-color:red;
}
.div2{
position:absolute;
top:0;
left:0;
width:100%;
height:500px;
background-color:green;
display:none; /*初始狀態下隱藏*/
}

接下來我們要實現切換效果了，我們可以利用CSS的transition來實現。transition可以使元素在改變時平滑過渡。

/*設置切換效果*/
div:hover .div1{
display:none;
}
div:hover .div2{
display:block;
transition:all 1s ease-in-out; /*1s為過渡時間，ease-in-out為過渡方式*/
}

接下來我們來解釋一下代碼：

第一部分先設置了兩個DIV的樣式，其中一個DIV的背景顏色為紅色，另一個DIV的背景顏色為綠色，并且初始狀態下隱藏了。

第二部分利用:hover選擇器，設定當div元素被鼠標指向時，將紅色DIV隱藏，將綠色DIV顯示，并且在1秒內平滑過渡。

這樣，我們就成功地實現了CSS設置DIV切換效果。代碼如下：

<div>
<div class="div1"></div>
<div class="div2"></div>
</div>

在HTML中只需要將兩個DIV放到一個DIV容器中，然后添加相應的class即可。