在工作中為了使頁面更具有吸引力，前端開發(fā)人員經(jīng)常會在頁面中加上鼠標(biāo)移入和移出的效果。鼠標(biāo)移入移出的設(shè)置，一般有兩種方法，一種是單純用CSS中的hover偽類，另一種可以用JS 中的DOM事件，即onmouseover和onmouseout。接下來這篇文章就和大家講講CSS偽類hover和JS鼠標(biāo)事件mouseover的區(qū)別，希望可以幫助到你。

程序猿的生活：打造全網(wǎng)web前端全棧資料庫（總目錄）看完學(xué)的更快，掌握的更加牢固，你值得擁有（持續(xù)更新）?zhuanlan.zhihu.com

JS可以對 HTML 事件作出反應(yīng)，mouse屬于javascript里的，他可以觸發(fā)js命令，當(dāng)元素綁定一個事件，事件發(fā)生的時候，可以執(zhí)行一段javascript代碼。

JavaScript中鼠標(biāo)事件有：

onmouseover和onmouseout： 當(dāng)鼠標(biāo)移入和移出時觸發(fā)事件
onmousedown和onmouseup： 當(dāng)鼠標(biāo)按鈕被按下或者松開時觸發(fā)事件
onclick和ondbclick ：當(dāng)鼠標(biāo)單擊或者雙擊時觸發(fā)事件
onmousemover ：當(dāng)鼠標(biāo)移動時觸發(fā)事件

CSS：hover是css中的一種偽類選擇器，指鼠標(biāo)移入然后移出的過程，這個操作可以改變元素的樣式，而且它相應(yīng)的子類也被改變。但無法改變元素的內(nèi)容。比如，鼠標(biāo)經(jīng)過實(shí)現(xiàn)彈出窗口的效果，它用的是onmousemove實(shí)現(xiàn)的，如果用hover則沒辦法做出這樣的效果。

可能文字描述不是很好理解，接下里，舉例個例子，看看hover和mouseover，mouseout之間有什么不同，結(jié)合圖片看就一目了然了。

先看看CSS:hover方法實(shí)現(xiàn)的效果吧

HTML部分：

<divclass="container">
<divclass="aa">內(nèi)容1</div>
<divclass="bb">內(nèi)容2</div>
</div>

CSS部分：

.container {
width: 200px;
border: 1pxsolid#000000;
margin: 200pxauto;
line-height: 100px;
text-align: center;
}
.aa,.bb {
height: 100px;
margin: 1px;
background: #ccc;
}
.aa:hover{background: pink;}

效果圖：

一個大盒子中含有兩個小的div，我想讓鼠標(biāo)經(jīng)過上面一個div時，背景顏色變成粉色。左圖是鼠標(biāo)未移入的效果，右圖是鼠標(biāo)經(jīng)過時的效果。從圖片中可以看出，CSS：hover確實(shí)可以實(shí)現(xiàn)這個效果。

那接下來，我們看看JavaScript中的onmouseover和onmouseout又是怎么實(shí)現(xiàn)的。CSS部分代碼一樣，只是HTML加了事件，用到了JavaScript。

HTML部分：

<divclass="container">
<divclass="aa"οnmοuseοver="over(this)"οnmοuseοut="out(this)">內(nèi)容1</div>
<divclass="bb">內(nèi)容2</div>
</div>

JavaScript部分：

functionover(obj){
obj.innerHTML = "鼠標(biāo)移入";
obj.style.background = "pink";
}
functionout(obj){
obj.innerHTML = "移出了";
obj.style.background = "#ccc";
}

效果圖：

左圖是鼠標(biāo)未移入的樣式，和上面一樣，中間圖片是鼠標(biāo)經(jīng)過樣式，上面一個div的背景顏色變成了粉色，而且內(nèi)容變成了“鼠標(biāo)移入”，右圖是鼠標(biāo)移出后的效果，div里面的內(nèi)容變了。通過兩個例子的對比，應(yīng)該知道hover和mouseover，mouseout之間的區(qū)別了吧。

總結(jié)：CSS只能改變元素的樣式，無法改變元素的內(nèi)容，如果要改變內(nèi)容應(yīng)該使用JavaScript鼠標(biāo)事件onmouseover和onmouseout。所以只是為了樣式效果，用CSS的偽類hover，如果需要動態(tài)改變，則選擇js的事件。在工作中具體有什么還要看情況，選擇適合的方法。希望這個教程對你有用。

以上就是圖文詳解鼠標(biāo)事件CSS:hover和JS:mouseover的區(qū)別的詳細(xì)內(nèi)容，更多請關(guān)注我！！！

總結(jié)

以上是生活随笔為你收集整理的html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。