昨天董老师说她设置的a伪类在点过链接以后当鼠标再经过的时候就不动弹了。想想这个可能是很多人会遇到的问题,就借此机会趁空间恢复了将博客更新一下。
她的默认设置如下:
1 2 3 4 | a:link {text-decoration: none;color: #FFFFFF} a:active {text-decoration:none;color: #000000} a:hover { text-decoration:none;color: #000000} a:visited { text-decoration: none;color: #FFFFFF} |
这段话说的意思是链接是白色,激活时候是黑色的,浏览过的继续是白色。
但是她现在碰到的问题是:当一个链接成为visited状态的以后,鼠标结果以后不再是黑色,也就是说a:hover在链接点过以后将不再有效。
Css在执行的时候,在碰到同类属性时候一般都认最后一个属性,比如body {color:red;color:green;}出来后的颜色是green而不是red。那么这样就很好理解上面错误发生的原因了,更换一下顺序就哦了。
修改如下:
1 2 3 4 | a:link {text-decoration: none;color: #FFFFFF} a:active {text-decoration:none;color: #000000} a:visited { text-decoration: none;color: #FFFFFF} a:hover { text-decoration:none;color: #000000} |
这样问题就解决了。
顺便说一下,a伪类的顺序一般为:a:link、a:visited、a:hover、a:active 。所以上面最终调节的效果应该为:
1 2 3 4 | a:link {text-decoration: none;color: #FFFFFF} a:visited { text-decoration: none;color: #FFFFFF} a:hover { text-decoration:none;color: #000000} a:active {text-decoration:none;color: #000000} |
否则在鼠标点下链接的时候(a:active)还会出现上面的状况。