前几天快下班的时候,写了个超链接的样式,但总是不太对,没点过之前鼠标放上面会变黑色但点过后鼠标再放在此链接上就没反应了,甚是头疼。。
今天早上来上班把a:hover 放到a:visited 后面再试就好了,哎~~为此死了不少脑细胞啊~
可以用dreameaver生成一个超链接CSS看看就知道了,超链接A的4个CSS属性是有顺序的,若顺序不对会导致一些问题,例如:链接访问过后 hover 样式就不出现。
正确的顺序应该为,link-visited-hover-active。
a:link {
color: #676777;
text-decoration: none;
}
a:visited {
color: #676777;
text-decoration: none;
}
a:hover {
color: #90909F;
text-decoration: underline;
}
a:active {
color: #676777;
text-decoration: none;
}
温故而知新:
a:link 设置 a 对象在未被访问前的样式。 a:visited 设置 a 对象在其链接地址已被访问过时的样式。 a:hover 设置 a 对象在其鼠标悬停时的样式。 a:acitve 设置 a 对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样
一个便于记忆的LOVE原则(爱恨原则)
即四种伪类的首字母:LVHA-LoVe/HAte
