手机扫一扫访问本页内容

微信扫描点右上角"···"分享到好友或朋友圈

关闭
微信扫一扫可打开小程序

微信长按图片或搜“分享录”可打开小程序

关闭
经验

在移动端点击css的伪类hover后不会消失

今天闲着没事在手机上看了一下自己的网站,一不小心发现个细节问题,那就是之前给传到顶部和底部的两个小手加鼠标经过背景颜色但在移动端点击后竟然不会消失,要再点一下其他位置背景颜色才消失。

查了很多资料最后发现只要在body上绑定一个空的touchstart事件即可:
document.body.addEventListener(‘touchstart’, function(){ });

或者直接写在body上加 ontouchstart=””

不过这个在iOS上没问题但在安卓手机上有时候可以有时候又不行😣!

其他解决方案,可以改成用点击事件然后用active选择器,比较好但麻烦的解决方案是分别做PC端和移动端两套样式。

还有一种新的解决方案,那就是将所有要加hover效果的都放在@media (any-hover: hover)里写,这样在移动端就不会有hover效果了。

@media (any-hover: hover) {
    .bottom-scroll:hover, .bottom-scroll:focus {
        background-color: #00b9eb;
    }
}

展开阅读全文


上一篇:

下一篇:

服务器又要到期了鼓励一下吧
您还可以访问本站的小程序、公众号等所有端,或者下载APP, 在小程序、APP上可以评论文章以及保存图片还有在线客服哦,如您有任何疑问或建议可向作者提出意见反馈
扫码打开小程序可评论文章保存图片,在“我的”有实时在线客服哦,看效果?
关注我的公众号为您分享各类有用信息
分享录多端跨平台系统