首页 前端知识 CSS 手机端 hover 点击后无法取消样式解决方案

CSS 手机端 hover 点击后无法取消样式解决方案

2024-04-12 20:04:34 前端知识 前端哥 807 574 我要收藏

问题:

pchover 样式是鼠标悬浮显示效果,不悬浮就消失;

在移动端,hover 样式点击后显示,此后如果不做处理,那么 hover 样式就一直存在。

原因:

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

解决办法:

可以使用 :active 属性来替代 :hover 解决问题。

拓展:

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

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

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

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4757.html
标签
评论
发布的文章

HTML5学习笔记(二)

2024-04-21 10:04:45

HTML5 新增语义标签及属性

2024-04-21 10:04:32

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!