手机端CSS :hover点击后返回无法取消的解决方法

今天写项目时遇到一个问题,设置 :hover 属性的链接,点击后或者点击进入下一个页面返回依旧是 :hover 状态。

QQ截图20190701233618.png 手机端CSS :hover点击后返回无法取消的解决方法 经验总结

因为手机上的 :hover 效果相当于 click ,没办法检测到鼠标表移出。

我们可以使用 :active 属性来解决:

a:active{
    background: #f2f2f2;
}

拓展:

a:link 英文link就是链接的意思,代表当一段文本为链接时的属性。

a:visited 英文visited就是访问过的意思,代表这段文本被点击之后的属性。

a:hover 英文hover就是悬停的意思,代表鼠标指针放在这个链接上时的属性。

a:active 英文active就是有效的、快速的意思,代表鼠标按下时一瞬间的属性。

a:focus 英文active就是聚焦的意思,代表元素获得焦点时向元素添加特殊的样式。

推荐阅读:

百度站长平台https站点提交sitemap显示“抓取失败”的解决方法

HTML引入文件的绝对路径、相对路径、根目录

QQ聊天插件,鼠标划入划出显示隐藏效果。

【笔记】微信小程序通过app.json设置底部导航

JetBrains IDE Support 浏览器自动刷新插件(不定时更新)

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)