在運用鼠標移入移出事件時，一般有兩種做法，一種是DOM事件的"onmouseover"和"onmouseout"，還有一種是css的偽類":hover"。
在實際運用中如何選擇，取決於清楚明白的了解他們之間的區別。
HTML DOM 允許 JavaScript 對 HTML 事件作出反應。
在我們為元素綁定了一個事件，當事件發生的時候，可以執行一段javascript代碼。
關於鼠標事件，總共有：
onmouseover和onmouseout 鼠標指針移動到或離開元素時觸發腳本
onmousedown和onmouseup 鼠標按鈕被按下或松開時觸發腳本
onclick和ondbclick 鼠標單擊和雙擊時觸發腳本
onmousemover 鼠標指針移動時觸發腳本
鼠標事件的使用方法大同小異，即在元素標簽內分配事件屬性，然后將需要執行的javascript代碼放置到事件觸發的函數內，當我們點擊該元素時，就會觸發相應javascript代碼。
例如：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="Content-Language" content="utf-8" /> 6 <script type="text/javascript"> 7 function over(obj){ 8 obj.innerHTML = "進來了"; 9 obj.style.background = "red"; 10 } 11 function out(obj){ 12 obj.innerHTML = "出去了"; 13 obj.style.background = "#666"; 14 } 15 </script> 16 <style type="text/css"> 17 #box { 18 width: 400px; 19 border: 2px solid; 20 margin: 200px auto; 21 line-height: 100px; 22 text-Align: center; 23 } 24 #img1,#img2 { 25 height: 100px; 26 margin: 2px; 27 background: #ccc; 28 } 29 30 </style> 31 <title>opacity</title> 32 </head> 33 <body> 34 <div id="box"> 35 <div id="img1" onmouseover="over(this)" onmouseout="out(this)">這個是內容1</div> 36 <div id="img2">這個是內容2</div> 37 </div> 38 </body> 39 </html>
設立了2個相同的塊，分別給2個塊分配了鼠標指針移動到元素以及移出元素的事件onmouseover和onmouseout。
鼠標沒有動作時：
鼠標移動到內容1上：
鼠標移出內容1:
現在我們來嘗試用css的偽類:hover達到這種動態效果。
我們在css樣式中添加如下代碼：
1 #img2:hover { 2 background: #666; 3 }
隨后看看效果：
把鼠標移動到內容2上：
移出：
這樣就能看出區別了。
CSS 是層疊樣式表 (Cascading Style Sheets)的縮寫，只能對元素的樣式做出改變，而無法對元素的內容動態更改，因為那是前端腳本所做的事。
還有當鼠標移到元素上時，使用偽類":hover"和"onmouseover"雖然在一定程度上能夠達到同樣的效果，不過當移出元素后，運用了偽類":hover"的內容2恢復了移入前的狀態，而運用了"onmouseover"的內容1確保持了js對元素的更改，並且當元素綁定了多個事件時，元素保持最后一個觸發的事件的狀態。
所以在平時的使用中，如果僅止為了樣式顯示的效果，可以使用CSS的偽類，如果需要動態改變，則選擇js的事件。