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

一、移动端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。其他支持情况如下图:
移动端hover样式不消失&ios系统伪类:active不生效_第1张图片
移动端hover样式不消失&ios系统伪类:active不生效_第2张图片

二、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="() => {}" >clickbutton>
  • 方法三
    用js给全局加一个touchstart事件
document.addEventListener("touchstart", function() {},false);

注:vue中怎么添加呢?

<button @touchstart="() => {}" >clickbutton>

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

你可能感兴趣的:(前端)