在工作中為了使頁面更具有吸引力，前端開發人員經常會在頁面中加上滑鼠移入和移出的效果。滑鼠移入移出的設定，一般有兩種方法，一種是單純用CSS中的hover僞類，另一種可以用JS 中的DOM事件，即onmouseover和onmouseout。接下來這篇文章就和大家講講CSS僞類hover和JS滑鼠事件mouseover的差別，希望可以幫助到你。
打造全網web前端全棧資料庫（總目錄）看完學的更快，掌握的更加牢固，你值得擁有（持續更新）
JavaScript中滑鼠事件有：
onmouseover和onmouseout： 當滑鼠移入和移出時觸發事件
onmousedown和onmouseup： 當滑鼠按鈕被按下或者松開時觸發事件
onclick和ondbclick ：當滑鼠單擊或者輕按兩下時觸發事件
onmousemover ：當滑鼠移動時觸發事件
CSS：hover是css中的一種僞類選擇器，指滑鼠移入然後移出的過程，這個操作可以改變元素的樣式，而且它相應的子類也被改變。但無法改變元素的内容。比如，滑鼠經過實作彈出視窗的效果，它用的是onmousemove實作的，如果用hover則沒辦法做出這樣的效果。
可能文字描述不是很好了解，接下裡，舉例個例子，看看hover和mouseover，mouseout之間有什麼不同，結合圖檔看就一目了然了。
先看看CSS:hover方法實作的效果吧
HTML部分：
<divclass="container">
<divclass="aa">内容1</div>
<divclass="bb">内容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，我想讓滑鼠經過上面一個div時，背景顔色變成粉色。左圖是滑鼠未移入的效果，右圖是滑鼠經過時的效果。從圖檔中可以看出，CSS：hover确實可以實作這個效果。
那接下來，我們看看JavaScript中的onmouseover和onmouseout又是怎麼實作的。CSS部分代碼一樣，隻是HTML加了事件，用到了JavaScript。
HTML部分：
<divclass="container">
<divclass="aa"οnmοuseοver="over(this)"οnmοuseοut="out(this)">内容1</div>
<divclass="bb">内容2</div>
</div>
JavaScript部分：
functionover(obj){
obj.innerHTML = "滑鼠移入";
obj.style.background = "pink";
}
functionout(obj){
obj.innerHTML = "移出了";
obj.style.background = "#ccc";
}
效果圖：
左圖是滑鼠未移入的樣式，和上面一樣，中間圖檔是滑鼠經過樣式，上面一個div的背景顔色變成了粉色，而且内容變成了“滑鼠移入”，右圖是滑鼠移出後的效果，div裡面的内容變了。通過兩個例子的對比，應該知道hover和mouseover，mouseout之間的差別了吧。
總結：CSS隻能改變元素的樣式，無法改變元素的内容，如果要改變内容應該使用JavaScript滑鼠事件onmouseover和onmouseout。是以隻是為了樣式效果，用CSS的僞類hover，如果需要動态改變，則選擇js的事件。在工作中具體有什麼還要看情況，選擇适合的方法。希望這個教程對你有用。
以上就是圖文詳解滑鼠事件CSS:hover和JS:mouseover的差別的詳細内容，更多請關注我！！！