当前位置: 首页 > news >正文

JS实现css的hover效果,兼容移动端

Hi I’m Shendi


JS实现css的hover效果,兼容移动端


功能概述

CSS的hover即触碰时触发,在电脑端鼠标触碰,移动端手指触摸


有的时候光靠css实现不了一些效果,例如元素触发hover,其他元素触发动画效果,所以需要使用到js



实现方法

JS想模拟css的hover效果,可以使用鼠标的进入移出事件

此类事件有两种,一种为只对当前元素生效,一种对当前及当元素子元素也生效


var div = document.getELementById("div");
// enter是进入触发,leave移出触发,对子元素不生效,模拟hover使用这种
div.onmouseenter = function () {};
div.onmouseleave = function () {};// over是进入触发,out是移出触发,对子元素也生效
div.onmouseover = function () {};
div.onmouseout = function () {};


以上方法就可以在电脑端用js模拟css的hover效果了,但在移动端还是有点小问题

移动端的css hover效果是手指短暂触碰即可触发,上面的方法需要长按才能触发

于是可以使用 touch 函数(移动端才有)

var div = document.getELementById("div");
// start按下触发,end抬起触发
div.ontouchstart = function () {};
div.ontouchend = function () {};


上面这两种方法还是不能和移动端hover达到一样的效果,移动端是按下后触发hover,然后抬起不会解除hover,只有点击其他元素才会解除当前hover


于是可以只使用 touchstart,在任意元素按下后解除

当前元素的事件会先执行,然后再执行其他事件,所以要考虑先后问题

代码如下

var div = document.getELementById("div");
// 当前触发的元素,用于解决先后执行的问题
var curEle;
div.ontouchstart = function() {curEle = this;
};
// 任意元素按下解除hover
document.ontouchstart = function () {// 这里是解除hover部分// ...if (curEle) {// 这里是显示触摸的hover部分// ...// 最后将这一次触摸的元素置空,避免元素无法解除hovercurEle = null;}
};

最后整合两部分代码,就可以在电脑端,移动端使用js实现css的hover效果了

还有一点小问题,比如移动端按下大概需要1秒才会触发hover,上面的方法是直接触发,有要求可以参考自行处理


最后挂上我实现的效果,hover就隐藏元素显示另一元素,反之则显示回来

在这里插入图片描述在这里插入图片描述

sdpro.top


示例部分完整代码,使用JQ方便选择元素

html

<div class="menu"><a><div><span>菜单1</span></div><p>内容1</p></a><a><div><span>菜单2</span></div><p>内容2</p></a>
</div>

js

$(".menu > a").mouseenter(function () {$($(this).children("div")).slideUp();$($(this).children("p")).slideDown();
});
$(".menu > a").mouseleave(function () {$($(this).children("div")).slideDown();$($(this).children("p")).slideUp();
});var curEle;
document.ontouchstart = function () {$(".menu > a > div").slideDown();$(".menu > a > p").slideUp();if (curEle) {$($(curEle).children("div")).slideUp();$($(curEle).children("p")).slideDown();curEle = null;}
};
$(".menu > a").each(function () {this.ontouchstart = function() {curEle = this;};
});



END

相关文章:

JS实现css的hover效果,兼容移动端

Hi I’m Shendi JS实现css的hover效果&#xff0c;兼容移动端 功能概述 CSS的hover即触碰时触发&#xff0c;在电脑端鼠标触碰&#xff0c;移动端手指触摸 有的时候光靠css实现不了一些效果&#xff0c;例如元素触发hover&#xff0c;其他元素触发动画效果&#xff0c;所以需要…...

企业微信的后台怎么进入和管理?

企业微信管理后台&#xff0c;只有企业的管理员才可以进企业微信后台&#xff0c;普通员工想要进入后台、可以联系管理员将你设置为后台管理员。 一、怎么进入企业微信后台 管理员进入企业微信后台有两种路径&#xff1b; 路径一&#xff1a; 企业管理员直接在浏览器搜索企…...

【2223sW2】LOG2

写在前面 好好学习&#xff0c;走出宿舍&#xff0c;走向毕设&#xff01; 一些心路历程记录&#xff0c;很少有代码出现 因为鬼知道哪条代码到时候变成毕设的一部分了咧&#xff0c;还是不要给自己的查重挖坑罢了 23.3.2 检验FFT 早上师兄帮忙看了一眼我画的丑图&#xff…...

buuctf-web-[SUCTF 2018]MultiSQL1

打开界面&#xff0c;全部点击一遍&#xff0c;只有注册和登录功能可以使用注册一个账号&#xff0c;注册admin提示用户存在&#xff0c;可能有二次注入&#xff0c;注册admin自动加了一个字符&#xff0c;无法二次注入&#xff0c;点击其他功能点换浏览器重新登录后&#xff0…...

GitLab创建仓库分配权限

文章目录创建仓库分配权限参考资料创建仓库 点击“New project”创建新项目 分配权限 点击左侧菜单栏“Members”成员&#xff0c;菜单 “Invite member”邀请成员&#xff0c;添加人员&#xff1b;“Invite group”邀请组织&#xff0c;添加一个组织所有成员下面输入框搜索…...

代码随想录-51-110.平衡二叉树

目录前言题目1.求高度和深度的区别节点的高度节点的深度2. 本题思路分析&#xff1a;3. 算法实现4. pop函数的算法复杂度5. 算法坑点前言 在本科毕设结束后&#xff0c;我开始刷卡哥的“代码随想录”&#xff0c;每天一节。自己的总结笔记均会放在“算法刷题-代码随想录”该专…...

项目实战典型案例27——对生产环境以及生产数据的敬畏之心

对生产环境以及生产数据的敬畏之心一&#xff1a;背景介绍总结升华一&#xff1a;背景介绍 本篇博客是对项目开发中出现的对生产环境以及生产数据的敬畏之心行的总结并进行的改进。目的是将经历转变为自己的经验。通过博客的方式分享给大家&#xff0c;大家一起共同进步和提高…...

如何查找你的IP地址?通过IP地址能直接定位到你家!

我们ip地址分为A、B、C、D、E共5类&#xff0c;每一类地址范围不同&#xff0c;从A到Eip地址范围依次递减&#xff0c;其中哦&#xff0c;D和E是保留地址&#xff0c;我们用不了。A、B、C3类地址很多都被美国这样的西方国家分走了&#xff0c;而留给我们的就剩有限的地址了&…...

Containers--array类

Array 类 简介 Array 类是一个固定大小的数组&#xff0c;它的大小在编译时就已经确定了。Array 类的大小是固定的&#xff0c;因此它的大小不能改变。 数组是固定大小的序列容器:它们以严格的线性顺序保存特定数量的元素。 在内部&#xff0c;数组除了包含的元素之外不保留…...

LinqConnect兼容性并支持Visual Studio 2022版本

LinqConnect兼容性并支持Visual Studio 2022版本 现在支持Microsoft Visual Studio 2022版本17.5预览版。 添加了Microsoft.NET 7兼容性。 共享代码-共享相同的代码&#xff0c;以便在不同的平台上处理数据。LinqConnect是一种数据库连接解决方案&#xff0c;适用于不同的基于.…...

流量监管与整形

流量监管与整形概览流量监管介绍流量监管令牌桶流量监管的具体实现单桶单速流量监管双桶单速流量监管双桶双速流量监管流量整形介绍GTS&#xff08;Generic Traffic Shaping&#xff09;LR&#xff08;Line Rate&#xff09;流量整形与流量监管的区别概览 流量整形是对报文的速…...

详解init 容器

什么是init容器 init 容器是一种特殊容器&#xff0c;在 Pod 内的应用容器启动之前运行。Init 容器可以包括一些应用镜像中不存在的实用工具和安装脚本。 你可以在 Pod 的规约中与用来描述应用容器的 containers 数组平行的位置指定 Init 容器 每个 Pod 中可以包含多个容器&…...

RequestResponseBodyMethodProcessor

既是一个参数解析器&#xff0c;也是一个返回结果处理器。 1.持有消息转换器的集合 protected final List<HttpMessageConverter<?>> messageConverters;2.作为参数解析器&#xff0c;例如对RequestBody标识的参数进行解析 判断是否支持当前类型的参数 Overrid…...

函数的极限

目录 函数的极限 函数极限的定义&#xff1a; 例题&#xff1a; 左右极限&#xff1a; 自变量趋于无穷大时函数的极限&#xff1a; 例题&#xff1a; 函数极限的性质&#xff1a; 函数极限与数列极限之间的关系&#xff1a; 函数的极限 函数极限的定义&#xff1a; 一句…...

dnf命令使用

1. 简介 DNF是新一代的rpm软件包管理器。他首先出现在 Fedora 18 这个发行版中。而最近&#xff0c;它取代了yum&#xff0c;正式成为 Fedora 22 的包管理器 DNF包管理器克服了YUM包管理器的一些瓶颈&#xff0c;提升了包括用户体验&#xff0c;内存占用&#xff0c;依赖分析…...

CLIP CLAP

文章目录CLIPabstractintroCLAP: LEARNING AUDIO CONCEPTS FROM NATURAL LANGUAGE SUPERVISIONabstractmethodCLIP open AI2021.2代码&预训练模型 abstract 原有的基于有监督数据训练的计算机分类任务&#xff0c;在面对新的分类目标时泛化性和可用性都会变差&#xff1…...

Debezium报错处理系列之五十二:解决Sql Server数据库安装后修改主机名导致sqlserver数据库实例名称没有修改从而无法设置CDC的问题

Debezium报错处理系列之五十二:解决Sql Server数据库安装后修改主机名导致sqlserver数据库实例名称没有修改从而无法设置CDC的问题 一、完整报错二、错误原因三、解决方法Debezium报错处理系列一:The db history topic is missing. Debezium报错处理系列二:Make sure that t…...

scratch老鹰捉小鸡 电子学会图形化编程scratch等级考试二级真题和答案解析2022年12月

目录 scratch老鹰捉小鸡 一、题目要求 1、准备工作 2、功能实现 二、案例分析 <...

概率论小课堂:公理化过程(大数据方法解决问题的理论基础)

文章目录 引言I 初等概率论1.1 19世纪概率论的最大难题1.2 伯努利版本的大数定理1.3 切比雪夫版本的大数定理II 现代概率论(用公理来描述概率论)2.1 柯尔莫哥洛夫2.1 用公理来描述概率论III 最基本的概率论定理3.1 互补事件的概率之和等于13.2 不可能事件的概率为零引言 前苏…...

WOW64 IsWow64Process GetNativeSystemInfoWindows System32 SysWOW64

最近开发有遇到这方面的一些知识点&#xff0c;在此记录下。首先&#xff0c;什么是WOW64&#xff1f;在知道这个之前我觉得需要了解一下&#xff0c;C:\\Windows\\System32和C:\\Winodws\\SysWOW64这两个文件夹的区别&#xff0c;Windows系统最开始的时候出的就是32bit的系统&…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...