CSS中提供了:hover偽類，能夠?qū)崿F(xiàn)鼠標(biāo)經(jīng)過(guò)元素時(shí)的樣式變化。而JavaScript則可以使用事件來(lái)實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)的交互效果。下面分別舉例說(shuō)明。

/* CSS hover */
.btn{
background-color: #ccc;
}
.btn:hover{
background-color: #ff9900;
}

上述代碼定義了一個(gè)類名為btn的元素，初始狀態(tài)下其背景色為灰色。當(dāng)鼠標(biāo)經(jīng)過(guò)該元素時(shí)，通過(guò):hover偽類將該元素的背景色變?yōu)槌壬瑥亩鴮?shí)現(xiàn)了一個(gè)簡(jiǎn)單的鼠標(biāo)經(jīng)過(guò)效果。

// JavaScript mouseover
var btn = document.getElementsByClassName('btn')[0];
btn.addEventListener('mouseover', function(){
btn.style.backgroundColor = '#ff9900';
});
btn.addEventListener('mouseout', function(){
btn.style.backgroundColor = '#ccc';
});

上述代碼則使用了JavaScript來(lái)實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)效果。首先獲取到類名為btn的元素，然后給其添加了鼠標(biāo)經(jīng)過(guò)和鼠標(biāo)移出事件。當(dāng)鼠標(biāo)經(jīng)過(guò)按鈕時(shí)，通過(guò)修改該元素的樣式將背景色變?yōu)槌壬划?dāng)鼠標(biāo)移出按鈕時(shí)，則將背景色恢復(fù)為灰色。