怎么移除css的hover事件

news2025/1/11 12:40:54

 

 

移除css hover事件的方法:1、;通过“$("a").hover(function(){ alert('mouseover'); }, function(){ alert('mouseout'); })”方法绑定hover事件;2、通过“$('a').off('mouseenter').unbind('mouseleave');”方法取消绑定的hover事件即可。

 

jquery中取消和绑定hover事件的正确方式

在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用on去绑定hover方法呢?如何用off取消绑定的事件呢?

一、如何绑定hover事件

先看以下代码,假设我们给a标签绑定一个click和hover事件:

$(document).ready(function(){ $('a').on({ hover: function(e) {
 //Hover event handler
alert("hover"); },
click: function(e) { // Click event handler
alert("click"); } });
});

 

当点击a标签的时候,奇怪的事情发生了,其中绑定的hover事件完全没有反应,绑定的click事件却可以正常响应。

但是如果换一种写法,比如:

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })

 

应该使用 mouseenter 和 mouseleave 这两个事件来代替,(这也是 .hover() 函数中使用的事件)

所以完全可以直接像这样来引用:

$(document).ready(function(){ $('a').on({ mouseenter: function(e) {
//Hover event handler
alert("mouseover"); }, mouseleave: function(e) {
//Hover event handler
alert("mouseout"); }, click: function(e) {
// Clickevent handler
alert("click"); } });
});

 

因为.hover()是jQuery自己定义的事件,是为了方便用户绑定调用mouseenter和mouseleave事件而已,它并非一个真正的事件,所以当然不能当做.on()中的事件参数来调用。

二、如何取消hover事件

大家都知道,可以使用off函数去取消绑定的事件,但是只能取消通过bind绑定的事件,jquery中的hover事件是比较特殊的,如果通过这种方式去绑定的事件,则无法取消。

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })

 取消绑定的hover事件的正确方式:

$('a').off('mouseenter').unbind('mouseleave');

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/193972.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Filesystem closed报错问题处理

使用HDFS的时候 final Configuration conf new Configuration(); final FileSystem fs FileSystem.get(URI.create(hdfsFile), conf); final Path path new Path(hdfsFile); if (fs.exists(path)) {final FSDataInputStream is fs.open(path);final FileStatus stat fs.g…

一文细说OpenCL框架

说明: 子曾经曰过:不懂Middleware的系统软件工程师,不是一个好码农; 1. 介绍 OpenCL(Open Computing Language,开放计算语言):从软件视角看,它是用于异构平台编程的框架&#xff1b…

华为OD测试岗面经,一周走完面试流程

一周走完面试流程,10.18 机考,机试210 第一题:【最大N个数与最小N个数的和】 第二题:拼接URL 第三题:跳格子 性格测试:题目比较多,有一百多道,在三个选项中选出一个最符合的和一个最不符合的。答题的时候以…

C++:string模拟实现(下)

目录 一.引言 二.string类的容量操作接口 三.string类的字符串修改操作接口 1.两个插入字符的重载函数: 2.在string字符串末尾追加内容的接口 3.在指定位置pos删除n个字符的接口 四.string类字符串的字符和子串查找接口 五.全局定义的string类字符串比较运算…

SSM项目-小说网站

目录 设计目标 需求分析 网站主页 用户注册 1、需求分析 2、数据库设计 3、生成验证码 4、数据加密 1、MD5 2、BCrypt加密 5、数据交换格式 用户登录 找回密码 新用户注册 邮件发送 检测登录状态 书架功能 查看书架 添加书籍进入书架 删除书架上的书籍 获…

kafka在zookeeper中存储结构

1、存储结构图 2、ZooKeeper命令 ZooKeeper -server host:port cmd args stat path [watch] set path data [version] ls path [watch] delquota [-n|-b] path ls2 path [watch] setAcl path acl setquota -n|-b val…

Verticle-align

1.verticle-align的官方解释及所产生的疑问 1.1 vertical-align的官方解释 vertical-align会影响 行内块级元素 在一个 行盒 中垂直方向的位置 【这里有重点词汇,一个行盒,行内块元素,为什么不包括块元素呢,因为块元素是独占一行…

TOP10:餐饮店设计排行榜(2023年最新排名)

随着我国经济不断的高速发展,自13年以来,大众化餐饮市场呈现良好发展趋势,已由13年的2.64万亿增长到3.96万亿,增长率为10.7%,预计2017年到2022年增长速度为9.9%,达到6.28万亿。其中中餐主题餐饮占比维持在8…

JVM 基础 - Java 类加载机制

Java 类加载机制类加载器的分类类加载机制类加载器的分类 如果有必要,我们还可以加入自定义的类加载器。因为JVM自带的ClassLoader只是懂得从本地文件系统加载标准的java class文件,因此如果编写了自己的ClassLoader,便可以做到如下几点&…

django-rest-framework框架总结之View视图之APIView、GenericAPIView、视图集ViewSet

APIView APIView 是 REST framework 提供的所有视图的基类,继承自Django的View父类。支持认证、限流、授权等功能。 rest_framework.views.APIViewAPIView 与 View 的不同之处在于: 传入到视图方法中的是 REST framework 的 Request 对象,…

Linux gcc和gdb的使用

gcc/g编译器的使用 gcc如何使用 语法: gcc [选项] 编译文件 功能: 用于编译C语言程序,编译C程序使用g。 选项: 指令说明-E只激活预处理,这个不生成文件,你需要把它重定向到一个输出文件里面-S编译到汇编语言不进行汇编和链接…

python设计模式-单例模式,工厂模式

单例模式 单例模式将类的实例化限制为一个对象。 它是一种创建模式,只涉及创建方法和指定对象的一个类。 它提供了创建实例的全局访问点。 如何实现一个单例类? 下面的程序演示了单例类的实现,并多次打印创建的实例。 class Singleton:_…

动态规划(详细解释)

日升时奋斗,日落时自省 目录 1、Fibonacci 2、字符串分割 3、三角矩阵 4、路径总数 5、最小路径和 6、背包问题 7、回文串分割 8、编辑距离 9、不同子序列 10、总结 DP定义: 动态规划是分治思想的延伸,通俗一点来说就是大事化小&a…

高密度 ARM 服务器如何引领“数智时代”发展,打通“智变质变”正循环

并行计算 | 多样性计算 | ARM架构 深度学习 | 高性能计算 | ARM服务器 如今随着算力、高性能计算的快速发展,数字经济已经成为全球经济增长的主引擎。数字经济的快速发展,使得深度学习、数据分析、数据挖掘等技术迅猛发展起来。伴随国家政策东数西算的…

无痕埋点在Android中的实现

无痕埋点在Android中的实现 目标 解决手动打点效率低下问题自动化埋点 本篇技术实现主要是运行是代理,不涉及到插桩技术,不引入插件,对业务影响点最小 技术难点 1. 如何拦截到所有的view的点击事件 view有个setAccessibilityDelegate方…

Day02-带你走进数据分析的世界

文章目录Day02-带你走进数据分析的世界数据分析正在影响我们的工作、生活数据分析和你想象中的一样吗我们应该具备的数据分析能力Day02-带你走进数据分析的世界 数据分析正在影响我们的工作、生活 随着全球经济数字化转型的发展,各行各业都积累了大量的数据。 具有…

微信小程序做全局登录弹窗

需求:在任意需要弹出登录的页面,后台返回需要登录状态码,弹出登录弹窗进行登录,并刷新当前页面 过程:因为微信小程序无法封装一个全局组件通过方法全局调用。因此只能封装一个公共组件,在需要弹窗的页面注册…

Spark入门指南

文章目录什么是SparkSpark学习路线Spark入门指南什么是Spark Apache Spark 是一个开源集群运算框架,最初是由加州大学伯克利分校 AMP 实验室所开发。相对于 Hadoop 的 MapReduce 会在运行完工作后将中间数据存放到磁盘中,Spark 使用了存储器内存运算技术…

SpringMVC之请求与响应

目录 一&#xff1a;设置请求映射路径 1. 环境准备 二&#xff1a;问题分析 三&#xff1a;设置映射路径 四&#xff1a;请求参数 一&#xff1a;设置请求映射路径 1. 环境准备 创建一个Web的Maven项目 pom.xml添加Spring依赖 <?xml version"1.0" encodi…

基于Android的电子影院系统

需求信息&#xff1a; 客户端&#xff1a; 1&#xff1a;用户注册登录&#xff1a;通过手机号码、用户名称以及密码完成用户的注册和登录 2&#xff1a;影院信息&#xff1a;用户可以查看发布的影院信息以及查看影院具体反映的电影信息以及可以查看电影的宣传片&#xff1b; 3&…