前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >手机端CSS :hover点击后返回无法取消的解决方法

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

作者头像
德顺
发布2019-11-13 14:06:12
3.4K0
发布2019-11-13 14:06:12
举报
文章被收录于专栏:前端资源前端资源前端资源

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

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

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

a:active{
    background: #f2f2f2;
}

拓展:

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

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

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

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

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

声明:本文由w3h5原创,转载请注明出处:《手机端CSS :hover点击后返回无法取消的解决方法》 https://cloud.tencent.com/developer/article/1538113

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档