a标签有以下四个伪类:
link 未访问(默认) hover 鼠标悬停(鼠标滑过) active 鼠标激活(鼠标按下) visited 访问过后(点击过后)
四个伪类在css中的顺序可能影响到我们实际使用中效果,看两个测试页面:
1、hover/active在鼠标第一次操作之后失效 ,请点击这里查看演示页面,css样式代码如下
a:link{ font-size:60px; text-decoration:none; color:green;}
a:hover{color:red; text-decoration:underline;}
a:active{color:yellow;}
a:visited{color:black;}
2 、hover/active一直都有效 ,请点击这里查看演示页面,css样式代码如下
a:link{ font-size:60px; text-decoration:none; color:green;}
a:visited{color:black;}
a:hover{color:red; text-decoration:underline;}
a:active{color:yellow;}
通过上面的代码我们可以看出只要把visited伪类放到hover/active前面,就可以解决hover只有第一次有效的bug。
本文探讨了CSS中a标签的伪类(link、visited、hover、active)在不同顺序下对于鼠标悬停和激活状态的影响,并提供了解决hover只在第一次有效的问题方案。


被折叠的 条评论
为什么被折叠?



