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

这篇具有很好参考价值的文章主要介绍了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部分
        // ...
        
        // 最后将这一次触摸的元素置空,避免元素无法解除hover
        curEle = null;
    }
};

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

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


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

JS实现css的hover效果,兼容移动端JS实现css的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文章来源地址https://www.toymoban.com/news/detail-405345.html

到了这里,关于JS实现css的hover效果,兼容移动端的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS 实现鼠标hover 展示内容

    👏 CSS 实现鼠标hover 展示内容,速速来Get吧~ 🥇 文末分享源代码。记得点赞+关注+收藏! 定义一个宽高为300px的父容器 父容器中添加一张图片,与父容器大小一致 为父容器添加伪元素,宽高与父元素一致,背景色为50%的白色,基于父容器left为0,top为0,默认opacity设置为0,即

    2024年02月09日
    浏览(41)
  • 【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )

    链接伪类选择器 可以 设置 链接文本 的 不同状态的样式 : 未访问链接样式 : 默认的样式 , 界面打开后 , 默认显示该样式 ; 已访问链接样式 : 点击过的链接 , 链接变成该样式 ; 鼠标移动到链接样式 : 鼠标移动到 链接 上方 , 链接变成该样式 ; 选定链接样式 : 按下鼠标松开时 ,

    2024年02月04日
    浏览(53)
  • three.js实现鼠标点击控制物体移动(带动画效果,位置精确)

    通过查阅各种资料,最终确定解决方案,动画效果使用gsap组件库实现,也可不用,代码稍作修改即可。解决鼠标点击坐标偏移问题,复制可直接运行。 完整代码如下:

    2024年02月07日
    浏览(56)
  • html+css+js实现小红点跟随鼠标移动

    2024年02月06日
    浏览(85)
  • css 四角边框移动效果

    块是长宽相等的正方形,大小浏览器分辨率变化而变化 利用平移变化translate来时实现边框到达鼠标划到的块,坐标是鼠标滑到块的offsetLeft和offsetTop

    2024年02月15日
    浏览(35)
  • 【vue3】js + css 实现 视频框选放大:局部细节放大、放大镜效果

    实现鼠标框选区域放大显示。 需求1:放大 按住鼠标左键不放 ——》向右侧拖动,框选出需要放大的区域后 ——》松开鼠标 ——》框选区域放大显示 需求2:还原 按住鼠标左键不放 ——》向左侧拖动,框选出随意大小的区域后 ——》松开鼠标 ——》视图显示大小还原 需求

    2024年02月03日
    浏览(52)
  • 前端常用js、css效果

    效果 主要整理了几个常用的,方便平时做项目的时候参考 文本横向滚动 文本无限滚动 无缝轮播 无缝滚动 盒子上下滚动 樱花飘落效果 参考代码 文本横向滚动 文本无限滚动 无缝轮播 无缝滚动 盒子上下移动 樱花飘落 添加插件sakura.js就可以了,不用什么代码

    2024年02月02日
    浏览(39)
  • HTML+JS+CSS歌词滚动效果

    这些代码主要实现了歌词的初始化、显示和随音频播放的同步滚动。其中, initWords 函数用于将歌词字符串解析成数据数组, parseTime 函数用于将时间字符串转换为秒数。通过 setOffset 函数实现歌词的滚动和高亮显示。最后,添加了一个滚动事件监听器,以便用户通过滚动调整

    2024年01月17日
    浏览(45)
  • CSS图文消息的鼠标hover悬停特效

    效果展示 完整代码

    2024年02月03日
    浏览(52)
  • HTML+JS+CSS移动端购物车选购界面

    UIGoods 类: 构造函数: 创建 UIGoods 实例时,传入商品数据 g ,初始化商品的数据和选择数量。 getTotalPrice() 方法: 计算商品的总价,考虑了选择数量。 isChoose() 方法: 判断是否选中该商品。 increase() 方法: 增加商品的选择数量。 decrease() 方法: 减少商品的选择数量,但数量

    2024年02月02日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包