a:hover{ color: red; text-decoration: none; } a:active{ color: blue; text-decoration: underline; }
当鼠标放在超链接上时,:hover伪类将实现超链接文字变色且无下划线的效果。这样的效果可以使用户更加清晰地知道鼠标已经悬浮在超链接上。
当鼠标点击超链接并保持不放的时候,:active伪类将实现超链接文字变色并增加下划线的效果。这样的效果可以使用户更加清晰地知道自己点击了超链接。
鼠标放开后,:active伪类的效果就消失了。
除了可以改变颜色和下划线,还可以通过background-color属性来实现背景色的改变,以增强用户交互体验。
a:hover{ color: white; background-color: red; } a:active{ color: white; background-color: blue; }
这样的效果可以使用户更加清晰地知道自己点击了超链接,并且增加了鼠标悬浮效果的动态感。