当前位置: 首页 > 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的系统&…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...