這篇文章將為大家詳細(xì)講解有關(guān)鼠標(biāo)事件CSS:hover和JS:mouseover有什么區(qū)別，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、網(wǎng)頁空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、溫嶺網(wǎng)站維護(hù)、網(wǎng)站推廣。

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

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

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

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

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

HTML部分：

     
內(nèi)容1
     
內(nèi)容2

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;}

效果圖：

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

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

HTML部分：

     
內(nèi)容1
     
內(nèi)容2

JavaScript部分：

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

效果圖：

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

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

關(guān)于鼠標(biāo)事件CSS:hover和JS:mouseover有什么區(qū)別就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。