移动端实现hover效果

最新推荐文章于 2024-01-17 18:57:40 发布
最新推荐文章于 2024-01-17 18:57:40 发布
阅读量2.9k 收藏
点赞数
分类专栏： css 文章标签： ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42835782/article/details/115658076
版权

document.body.addEventListener(‘touchstart’, function(){ });加上这行代码，空函数就行
然后：hover改成：active，实现PC端hover效果

PC端:hover 样式在移动端的兼容处理
gahsuxjxnxn的博客
08-08 1168
所以简单来说,移动端实现 hover 一般要配合 JavaScript 事件、CSS 媒体查询、第三方库来处理,达到与 PC 端类似的效果。对于移动端的 :hover 样式兼容,主要可以考虑以下几点:1. 使用触摸事件 wie touchstart、touchend 来模拟 hover 事件。写了一个轮播，有hover效果，PC端正常显示，移动端就出现一些问题，点击之后滑动到下一张，上一张有hover效果，要点击其他地方才会消失。解决方案↓，参考文章。
如果是在手机上查看投票页，没有HOVER效果时应该怎么办？
IT修真院：初学者转行到互联网的聚集地
05-29 504
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【如果是在手机上查看投票页，没有HOVER效果时应该怎么办？ 】 大家好，我是IT修真院北京分院第22期的学员杨纲，一枚正直纯洁善良的WEB前端程序员。 今天给大家分享一下，在手机上没有HOVER效果时...
移动端 hover 问题处理
一曲红尘诀
01-17 1969
移动端 hover 问题处理, 和 pc 端公用样式时
兼容移动端:hover
weixin_44502231的博客
01-25 2578
场景： （react实例） 对于一个列表，加上选中高亮样式： 1. pc端，鼠标滑过高亮 2. 移动端，点击div任意位置，整行高亮 问题描述： 在移动端，:hover属性生效了（黑色的边框border），如图： 原因分析： 在移动端，:hover的优先级高于class，如上图，最终的border颜色是黑色，而不是橘黄色。:hover被解析成click（mousedown）了；默认的click则是mouseup触发，效果如下图： 解决方案： 通过js的navigator.userAgent获取浏
hover移动端
zsq199771的博客
06-07 325
移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好的体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，那么正好分享一个激活css的active效果，代码如下 let ele = document.getElementsByClassName(‘el-slider__button-wrapper’) console.log(ele[0]) ele[0].ontouchstart = function(){ console.log(‘触摸开始’) } ele[0].on
移动端实现像PC端hover状态的几种办法
NICKDL的博客
04-20 3516
之前做的移动端页面时都没有考虑到交互体验问题，所用想加个hover状态，但移动端没有鼠标，因此只能用别的方式，如下： 1. 用css中的伪类:active实现 button { background-color: blue; &:active { background-color: green; } } 这种方式很方便，也比较容易处理，但是这样做会有兼容性问题，在ios端失效；因此可以做个兼容，在代码中加上如下代码即可： document.body.addEventListen
css移动端实现与pc端一样的:acitve效果
09-25
总结来说，要在移动端实现与PC端相同的`:active`效果，需要理解移动端的交互特点，并通过JavaScript辅助CSS来达到这一目的。通过绑定`touchstart`事件来辅助`:active`伪类选择器的触发，能够在不需要用户实际点击的...
h5 在移动端实现刷卡效果
最新发布
11-22
H5在移动端实现刷卡效果通常通过CSS3动画和JavaScript结合来模拟。你可以利用CSS3的`transform`, `transition`以及`hover`伪类来创建视觉上滑动的效果，同时配合一些库如Swipe.js或HammerJS等，提供更真实的触控感应...
H5移动web页面触摸按钮效果实现-模拟按钮hover效果实现
热门推荐
joshua
02-14 3万+
移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下： .btn{ display: block; position: relative; top: 100px; margin: 20px
JS实现css的hover效果，兼容移动端
砷碲 - Shendi
03-07 6493
CSS的hover即触碰时触发，在电脑端鼠标触碰，移动端手指触摸有的时候光靠css实现不了一些效果，例如元素触发hover，其他元素触发动画效果，所以需要使用到js。
移动端hover样式不消失&ios系统伪类:active不生效
CYL_2021的博客
12-15 2022
hover 匹配用户鼠标悬停状态。还有个和hover功能相同的any-hover语法一样作用也是一样的，唯一的区别就在于any-hover是检测任意的输入装置，而hover只检测主要的输入装置。注：IE浏览器下，@media (any-hover: hover) Edge16才支持，hover媒体查询，可以兼容到Edge12。
移动端css hover效果,css移动端:acitve效果的实现
weixin_30499557的博客
08-04 2163
做移动前端也有一些日子了，一直有个问题没有解决，就是与pc端那样的一个:hover的效果，:hover是鼠标指针浮动在其上的元素的一个选择器，但因为在移动端是没有鼠标的，代替的是触摸屏，用户也不是有“鼠标指针浮动在其上的元素”的情况，有也很少。 所以取代的应该:active这个选择器，但是通过实践，发现情况不是很理想，在QQ浏览器上有时触发，有没不触发，在我mx3带自浏览器上根本没效果。最近在看美...
ontouchstart实现手机触屏中的hover效果
web前端基础知识
03-04 2333
ontouchstart实现手机触屏中的hover效果 最近一直都在做手机网站的项目，会经常遇到手机屏幕触摸无交互效果，今天在一篇文章中看到模拟网页端hover效果的例子拿出来和大家分享下，已经使用效果还不错，大家可以根据下面的案例学下：   一、css样式： <style type="text/css">.inner { width: 100%; height: 100p...
移动web端自定义tap与模拟hover效果
weixin_33724059的博客
08-05 244
在上两篇文章【10行代码搞定移动web端自定义tap事件】【移动web端模拟hover效果】中分别对移动web端的自定义tap事件、模拟hover效果的原理进行了简单的说明。这篇文章主要把两者结合在了一起，解决了一些bug，使得整体效果更佳。 之前的自定义tap没有考虑到双击、长按等使用场景（感谢 @超级小面包 的建议！），这次新增了la...
Hover 手机端的实现
Candy_home的专栏
04-23 1万+
起因：手机端没有hover特效，当你点击的时候就直接触发click. 解决：手机端有他特殊touch事件。touchstart，touchmove, touchend.（PS：电脑端没有的，PC使用mouseover和mouseout）
hover事件对应的移动端touchstart、touchmove、touchend事件
qq_43654065的博客
09-17 1174
转载：触摸事件 touchstart、touchmove、touchend_蚩尤后裔-优快云博客_touchstart目录触摸事件触摸事件编码触摸手指个数分析触摸目标 DOM 元素分析触摸位置分析触摸事件HTML5 中， PC 端基于鼠标的界面互动主要是单击， 移动端界面交互方式主要是触摸。移动端浏览器触摸事件事件名称描述是否包含 touches 数组touchstart触摸开始，多点触控，后面的手指同样会触发是touchmove...https://blog.youkuaiyun.com/wangmx1993328
CSS 手机端 hover 点击后无法取消样式解决方案
且听风吟的博客
11-25 3654
CSS 手机端 hover 点击后无法取消样式解决方案
hover如何在移动浏览器上触发
weixin_30480075的博客
01-27 148
例如HTML结构如下 <div>menu<ul> <li>item1</li> <li>item2</li> </ul></div> CSS div:hover ul { display:block; } 如上代码，当鼠标悬浮到menu上时...
移动端:active,:hover无法很好触发动画的解决方案
weixin_34280237的博客
04-24 483
移动端:active,:hover无法很好触发动画的解决方案 1:问题环境: 用css3定义了一个动画,使用:hover伪类调用动画时在移动端不能很好的进行动画. 2:解决方案: 定义一个open类,满足open类的情况下触发动画 使用js事件去控制动画,当滑动的时候加上open类,然后延迟与动画相同的时间移除open类 这样就能很好的控制动画了 3：附上demo <!D...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值