今天写项目时遇到一个问题,设置 :hover
属性的链接,点击后或者点击进入下一个页面返回依旧是 :hover
状态。
因为手机上的 :hover
效果相当于 click
,没办法检测到鼠标表移出。
我们可以使用 :active
属性来解决:
a:active{ background: #f2f2f2; }
拓展:
a:link
英文link就是链接的意思,代表当一段文本为链接时的属性。
a:visited
英文visited就是访问过的意思,代表这段文本被点击之后的属性。
a:hover
英文hover就是悬停的意思,代表鼠标指针放在这个链接上时的属性。
a:active
英文active就是有效的、快速的意思,代表鼠标按下时一瞬间的属性。
a:focus
英文active就是聚焦的意思,代表元素获得焦点时向元素添加特殊的样式。
原创文章,作者:kepupublish,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/150342.html