首页 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

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++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 教程
1318
25
PHP教程
1269
29
C# 教程
1248
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伪类为链接添加悬停效果,当鼠标悬停在链接上时,链接的颜色、背景色等可以发生变化。

css中hover怎么使用 css中hover怎么使用 Feb 23, 2024 pm 12:06 PM

CSS中的hover伪类是一个非常常用的选择器,它允许我们在鼠标悬停在元素上时改变其样式。本文将为大家介绍hover的用法,并提供具体的代码示例。一、基本用法要使用hover,我们需要先为该元素定义一个样式,然后使用:hover伪类来制定鼠标悬停时对应的样式。例如,我们有一个button元素,当鼠标悬停在按钮上时,我们希望按钮的背景色变为红色,文字颜色变为白

css中hover怎么用 css中hover怎么用 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