移动端hover样式不消失&ios系统伪类:active不生效

儒雅的曹曹曹

已于 2023-12-22 15:20:34 修改

阅读量1.1k

点赞数 6

文章标签：前端

于 2023-12-15 16:28:15 首次发布

本文链接：https://blog.csdn.net/CYL_2021/article/details/135018726

版权

一、移动端hover样式不消失

在这里插入图片描述
:hover 匹配用户鼠标悬停状态。

在 PC 浏览器中，只要鼠标移动到元素上，它的 :hover 伪类就会立即生效，鼠标移走就会立即失效。
在移动浏览器中，:hover 的表现类似 PC 下的 :focus：在用户点击页面其他位置时，:hover 态才会消失。

解决方法：

/* 使用媒体查询，具有 hover 事件的设备才会显示 hover 样式*/
@media (hover: hover) {
    li:hover {
        background-color: var(--bot-color-blue-10);
    }
}
/* 移动端用 active 代替 hover （点击时有效果）*/
li:active {
    background-color: var(--bot-color-blue-10);
}

还有个和hover功能相同的any-hover

@media (any-hover:hover){}

语法一样作用也是一样的，唯一的区别就在于any-hover是检测任意的输入装置，而hover只检测主要的输入装置。

注：IE浏览器下，@media (any-hover: hover) Edge16才支持，hover媒体查询，可以兼容到Edge12。其他支持情况如下图：
在这里插入图片描述

二、ios系统伪类:active不生效

上述问题解决后，新的问题出现active后的效果不显示。

:active 匹配激活的元素，典型地就是正在于用户进行交互的元素。

在 PC 浏览器中，按下鼠标即可激活元素 :active 生效，松开鼠标就会取消激活状态 :active 失效。
在移动浏览器中，手指按下就会激活 :active 状态，手指松开就会取消激活状态 :active 失效。

但是：在 ios系统下如果你的元素没有绑定 touchstart, touchmove, 或 touchend，元素就不会进入 :active 状态。可以通过 addEventListener 或 ontouchstart=“” 的方式给它（或者它的祖先元素）添加这个事件，或者使用这个 npm 包：https://www.npmjs.com/package/active-touch。

解决方法：

方法一
在body标签上添加ontouchstart事件

<body ontouchstart></body>

方法二
在元素节点上添加ontouchstart事件

<button ontouchstart="() => {}" >click</button>

方法三
用js给全局加一个touchstart事件

document.addEventListener("touchstart", function() {},false);

注：vue中怎么添加呢？

<button @touchstart="() => {}" >click</button>

参考文章：https://harttle.land/2018/05/17/hover-active-focus-highlight-color.html

儒雅的曹曹曹

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
移动端hover样式不消失&ios系统伪类:active不生效

hover 匹配用户鼠标悬停状态。还有个和hover功能相同的any-hover语法一样作用也是一样的，唯一的区别就在于any-hover是检测任意的输入装置，而hover只检测主要的输入装置。注：IE浏览器下，@media (any-hover: hover) Edge16才支持，hover媒体查询，可以兼容到Edge12。
复制链接

扫一扫