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

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


一、hover伪类


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

1
2
3
4
a:hover {
    color: red;
    text-decoration: underline;
}

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


二、active伪类


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

1
2
3
4
a:active {
    color: blue;
    text-decoration: none;
}

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


三、visited伪类


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

1
2
3
4
a:visited {
    color: purple;
    text-decoration: none;
}

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


四、focus伪类


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

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

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


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

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

猿教程
请先登录后发表评论
  • 最新评论
  • 总共0条评论