圖文詳解滑鼠事件CSS:hover和JS:mouseover的差別

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

JS可以對 HTML 事件做出反應，mouse屬於javascript裡的，他可以觸發js指令，當元素綁定一個事件，事件發生的時候，可以執行一段javascript程式碼。

JavaScript中滑鼠事件有：
onmouseover和onmouseout： 當滑鼠移開和移出時觸發事件
onmousedown和onmouseup： 當滑鼠按鈕被按下或放開時觸發事件
onclick和ondbclick ：當滑鼠點擊或雙擊時觸發事件
onmousemover ：當滑鼠移動時觸發事件

CSS：hover是css中的一種偽類選擇器，指滑鼠移入然後移出的過程，這個操作可以改變元素的樣式，而且它對應的子類別也被改變。但無法改變元素的內容。例如，滑鼠經過實現彈出視窗的效果，它用的是onmousemove實現的，如果用hover則沒辦法做出這樣的效果。

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

先看看CSS:hover方法實現的效果吧

HTML部分：

<div class="container">
     <div class="aa">内容1</div>
     <div class="bb">内容2</div>
</div>

CSS部分：

.container {
           width: 200px;
           border: 1px solid #000000;
           margin: 200px auto;
           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部分：

<div class="container">
     <div class="aa" onmouseover="over(this)" onmouseout="out(this)">内容1</div>
     <div class="bb">内容2</div>
</div>

JavaScript部分：

function over(obj){        
                obj.innerHTML = "鼠标移入";        
                obj.style.background = "pink";
            }
           function out(obj){
                obj.innerHTML = "移出了";
                obj.style.background = "#ccc";        
            }

效果圖：

左圖是滑鼠未移入的樣式，和上面一樣，中間圖片是滑鼠經過樣式，上面一個div的背景顏色變成了粉紅色，而且內容變成了“滑鼠移入”，右圖是滑鼠移出後的效果， div裡面的內容變了。透過兩個例子的對比，應該知道hover和mouseover，mouseout的差別了吧。

總結：CSS只能改變元素的樣式，無法改變元素的內容，如果要改變內容應該使用JavaScript滑鼠事件onmouseover和onmouseout。所以只是為了樣式效果，用CSS的偽類hover，如果需要動態改變，則選擇js的事件。在工作中具體有什麼還要看狀況，選擇適合的方法。希望這個教學對你有用。

以上是圖文詳解滑鼠事件CSS:hover和JS:mouseover的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！