首頁 web前端 html教學 CSS中的onmouseover和hover有什麼差別?

CSS中的onmouseover和hover有什麼差別?

Jun 28, 2017 am 10:50 AM
hover

hover包含了滑鼠移到物件上,同時滑鼠再移出物件的過程,對應的子類別也被選取。

mouseover是滑鼠經過物件時,不包含他的子類別同時被選取。

主要差異在於 hover元素的子類別上也有新增了事件驅動。而mouseover 只對目前元素新增事件驅動。

且 hover 事件包含mouseover 事件


mousemove(fn);

在每一個符合元素的mousemove事件中綁定一個處理函數。

 

hover(over, out);

一個模仿懸停事件(滑鼠移動到一個物件上面及移出這個物件)的方法。這是一個自訂的方法,它為頻繁使用的任務提供了一種「保持在其中」的狀態。

當滑鼠移到一個符合的元素上面時,會觸發指定的第一個函數。當滑鼠移出這個元素時,會觸發指定的第二個函數。而且,會伴隨著滑鼠是否仍處在特定元素中的偵測(對子類別的偵測),如果是,則會繼續保持「懸停」狀態,而不觸發移出事件(mouseout)。

$("td").hover(     function () {    $(this).addClass("hover");  },     function () {    $(this).removeClass("hover"); });

在jquery原始碼中有這麼一段:
hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

也就是說hover! = mouseover+mouseout。但hover=mouseenter + mouseleave。

從前只知道像 hover、link、visited 和 active 這樣的偽類別只能應用到 a 標籤,也就是要寫成 a:hover、a:link、a:visited、a:active。其實這四個玩意是可以應用在其他的 html 標籤、指定給其他定義的 class 上。

有關於CSS 偽類可參考:http://www.w3school.com.cn/css/css_pseudo_classes.asp

a:link {color: #FF0000} /* 未訪問的連結*/

a:visited {color: #00FF00} /* 已造訪的連結*/

a:hover {color: #FF00FF} /* 滑鼠移到連結上* /

a:active {color: #0000FF} /* 選取的連結*/


以上是CSS中的onmouseover和hover有什麼差別?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1246
24
CSS小技巧:利用transition保留hover狀態 CSS小技巧:利用transition保留hover狀態 Sep 27, 2022 pm 02:01 PM

如何保留 hover 的狀態?以下這篇文章跟大家介紹一下不借助javascript保留hover狀態的方法,希望對大家有幫助!

體驗即飛 攜手哈浮X1相機的飛行之旅 體驗即飛 攜手哈浮X1相機的飛行之旅 Jan 15, 2024 pm 02:21 PM

我們經常能夠在網路上看到很多精彩的俯視視角的視頻,無人機拍出來的畫面確實相當震撼,但其實很多人對無人機的認知很有限,例如有些地方限飛為什麼還能飛?其實即開即飛的「無人機」才是當前的主流,更值得多數人選擇,今天就帶給大家哈浮飛行相機X1的上手體驗。外觀方面,哈浮飛行相機X1,首創折疊設計,整機僅125g,比手機輕,折疊後可以輕鬆手握,放進包包毫無壓力。四個軟性染葉和安全邊框設計,完美保護拍攝安全。染葉創新採用Biobased生物基材,高彈耐用,安全環保;更有全保護邊框加持,起飛降落都能貼心保護手

怎麼移除css的hover事件 怎麼移除css的hover事件 Feb 01, 2023 am 10:06 AM

移除css hover事件的方法:1、;透過「$("a").hover(function(){ alert('mouseover'); }, function(){ alert('mouseout'); })」方法綁定hover事件;2、透過「$('a').off('mouseenter').unbind('mouseleave');」方法取消綁定的hover事件即可。

html中的hover的作用 html中的hover的作用 Feb 20, 2024 am 08:58 AM

HTML中的hover的作用及具體程式碼範例在Web開發中,hover(懸停)是指當使用者將遊標懸停在一個元素上時,觸發一些動作或效果。它是透過CSS的:hover偽類別來實現的。在本文中,我們將介紹hover的作用以及具體的程式碼範例。首先,hover使元素在使用者懸停時可以改變其樣式。例如,將滑鼠懸停在一個按鈕上時,可以改變按鈕的背景顏色或文字顏色,以提示使用者當

hover為什麼是偽元素 hover為什麼是偽元素 Oct 09, 2023 pm 05:45 PM

hover不是偽元素,是偽類。偽類用於選擇元素的特定狀態或行為,而偽元素則用於在元素的特定部分中添加樣式。因為:hover用於選擇元素的特定狀態,而不是在元素的特定部分添加樣式,使用:hover偽類可以為元素的滑鼠懸停狀態添加樣式,可以透過:hover偽類為連結添加懸停效果,當滑鼠懸停在連結上時,連結的顏色、背景色等可以改變。

csshover怎麼使用 csshover怎麼使用 Feb 23, 2024 pm 12:06 PM

CSS中的hover偽類是一個非常常用的選擇器,它允許我們在滑鼠懸停在元素上時改變其樣式。本文將為大家介紹hover的用法,並提供具體的程式碼範例。一、基本用法要使用hover,我們需要先為該元素定義一個樣式,然後再使用:hover偽類來製定滑鼠懸停時對應的樣式。例如,我們有一個button元素,當滑鼠懸停在按鈕上時,我們希望按鈕的背景色變為紅色,文字顏色變為白

csshover怎麼用 csshover怎麼用 Nov 24, 2023 am 10:32 AM

在CSS中,:hover是一種偽類選擇器,用於選擇滑鼠指標懸停在上面的元素。當使用者將滑鼠停留在元素上時,可以使用:hover來套用一些樣式變化。

jQuery hover()方法怎麼使用 jQuery hover()方法怎麼使用 Dec 04, 2023 am 09:56 AM

hover()是jQuery中一個常用的方法,它用於綁定兩個事件處理函數,這兩個函數將在滑鼠指標進入和離開匹配的元素時執行。基本的使用方法為「$(selector).hover(inFunction,outFunction);」。

See all articles