问题:
在 pc
端 hover
样式是鼠标悬浮显示效果,不悬浮就消失;
在移动端,hover
样式点击后显示,此后如果不做处理,那么 hover
样式就一直存在。
原因:
因为手机上的 :hover
效果相当于 click
,没办法检测到鼠标表移出。
解决办法:
可以使用 :active
属性来替代 :hover
解决问题。
拓展:
a:link
:英文 link
就是链接的意思,表示当一段文本为链接时的属性。
a:visited
:英文 visited
就是访问过的意思,表示这段文本被点击之后的属性。
a:hover
:英文 hover
就是悬停的意思,表示鼠标指针放在这个链接上时的属性。
a:active
:英文 active
就是有效的、快速的意思,表示鼠标按下时一瞬间的属性。
a:focus
:英文 active
就是聚焦的意思,表示元素获得焦点时向元素添加特殊的样式。