CSS链接样式：hover、active、visited、focus

CSS链接样式：hover、active、visited、focus

一、hover伪类

hover伪类用于指定鼠标悬浮在链接上时的样式，常用于给链接添加交互效果。代码示例如下：

a:hover {
    color: red;
    text-decoration: underline;
}

以上代码表示当鼠标悬浮在链接上时，链接文字颜色变为红色，同时添加下划线。可以根据自己的需求设置不同的样式。

二、active伪类

active伪类用于指定链接被点击时的样式，常用于添加点击效果。代码示例如下：

a:active {
    color: blue;
    text-decoration: none;
}

以上代码表示当链接被点击时，链接文字颜色变为蓝色，同时去掉下划线。同样可以根据自己的需求设置不同的样式。

三、visited伪类

visited伪类用于指定已访问过的链接的样式，常用于为用户提供浏览历史。代码示例如下：

a:visited {
    color: purple;
    text-decoration: none;
}

以上代码表示已访问过的链接文字颜色变为紫色，同时去掉下划线。同样可以根据自己的需求设置不同的样式。

四、focus伪类

focus伪类用于指定链接获得焦点时的样式，常用于表单元素等。代码示例如下：

a:focus {
    outline: none;
    box-shadow: 0 0 3px #00BFFF;
}

以上代码表示链接获得焦点时，去掉默认的外边框，并添加一个蓝色的阴影。同样可以根据自己的需求设置不同的样式。

以上就是CSS链接样式中常用的hover、active、visited、focus四个伪类的使用方法和细节，希望对大家有所帮助。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： CSS边框样式：虚线、双线、圆角边框、边框阴影
• 下一篇： CSS滤镜效果：模糊、灰度、饱和度、对比度