在Web開發(fā)中，CSS是實現(xiàn)網(wǎng)頁樣式和布局的重要工具。其中之一的功能是在鼠標(biāo)移入和移出時改變元素的樣式，這在設(shè)計網(wǎng)站交互效果時非常有用。下面將演示如何使用CSS使鼠標(biāo)移入div后變寬。

div:hover {
width: 200px;
}

使用:hover偽類選擇器可以選中鼠標(biāo)懸停在其上的元素，在此基礎(chǔ)上設(shè)置樣式。在上述CSS代碼中，當(dāng)鼠標(biāo)懸停在div元素上時，將其寬度設(shè)置為200像素。

需要注意的是，該效果需要先設(shè)定div元素的初始寬度，否則鼠標(biāo)移出后，div將不會恢復(fù)原來的尺寸。比如：

div {
width: 100px;
}
div:hover {
width: 200px;
}

這樣，在鼠標(biāo)移入時，div會從原來的100像素寬度變?yōu)?00像素寬度，移出時再次回到初始狀態(tài)。

此外，還可以利用transition屬性來實現(xiàn)平滑的過渡效果：

div {
width: 100px;
transition: width 0.5s ease;
}
div:hover {
width: 200px;
}

這時，當(dāng)鼠標(biāo)移入div時，其寬度會在0.5秒內(nèi)緩慢過渡到200像素，移出時同樣會有平滑的恢復(fù)效果。

這些技巧可以幫助我們更好地實現(xiàn)網(wǎng)頁的交互效果，提升用戶體驗。當(dāng)然，還有更多更豐富的CSS效果等待我們?nèi)ヌ剿鳌?/p>