定义超链接时,为了提高用户体验,经常需要为超链接指定不同的状态,使得超链接在点击前、点击后和鼠标悬停时的样式不同。在CSS中,通过链接伪类可以实现不同的链接状态,下面将对链接伪类控制超链接的样式进行详细地讲解。

与超链接相关的4个伪类应用比较广泛,这几个伪类定义了超链接的4种不同状态,具体如表1所示。

表1 超链接标签的伪类

超链接标签的伪类描述a:link{ CSS样式规则; }超链接的默认样式

a:visited{ CSS样式规则; }超链接被访问过之后的样式

a:hover{ CSS样式规则; }鼠标经过、悬停时超链接的样式

a: active{ CSS样式规则; }鼠标点击不动时超链接的样式

在实际工作中,通常只需要使用a:link、a:visited和a:hover定义未访问、访问后和鼠标悬停时的超链接样式。并且常常对a:link和a:visited应用相同的样式,使未访问和访问后的超链接样式保持一致。

注意:

1、使用超链接的4种伪类时,对排列顺序是有要求的。通常按照a:link、a:visited、a:hover和a:active的顺序书写,否则定义的样式可能不起作用。

2、超链接的4种伪类状态并非全部定义,一般只需要设置3种状态即可,如link、hover和active。如果只设定是2种状态,即link、hover来定义。

3、除了文本样式之外,链接伪类还常常用于控制超链接的背景、边框等样式。

猜你喜欢:

html链接伪类设置鼠标悬停,链接伪类可以控制超链接的样式吗?是怎样实现的?...相关推荐

  1. HTML中设置鼠标悬停状态伪类,四大伪类,css鼠标样式设置,reset操作,静止对文本操作...

    本文将要为您介绍的是四大伪类,css鼠标样式设置,reset操作,静止对文本操作,教程操作方法:07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) ...

  2. axure中交互样式设置鼠标悬停后其他的按下选中无效_Axure交互动作

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 axure中交互样式设置鼠标悬停后其他的按下选中无效_交互区域 -- 交互动作 启用情形+交互事件+交互动作 三个部分构成了整个原型的交互逻辑.启用情形是 ...

  3. IntelliJ IDEA 设置鼠标悬停提示相关信息及F2重命名设置

    1.  配置鼠标悬停提示 在Eclipse中, 鼠标发在对象上会显示对象所属的包, 类等方法参数等信息, IDEA设置方法如下: 2.  更改F2 为重命名文件 在Setting中搜索"re ...

  4. 修改服务器设置能群发链接,修改服务器设置能群发链接

    修改服务器设置能群发链接 内容精选 换一换 创建一个外部服务器.外部服务器是存储OBS服务器信息或其他同构集群信息的载体.默认只有系统管理员才可以创建外部服务器,否则需要对所使用的FOREIGN DA ...

  5. html鼠标悬停改变背景,js设置鼠标悬停改变背景色实现详解_哒哒_前端开发者

    看了网上那么多的 this is test! }); function changBkColor(obj){ obj.οnmοuseοver=function(){ this.className=&q ...

  6. flarum设置鼠标悬停提示标记为已读

    需求 flarum版本为1.41. 想要实现的效果: 当鼠标悬停在帖子的右边讨论数量时提示"标记为已读" 解决 进入flarum安装目录的/public/assets目录中,编辑文 ...

  7. html设置鼠标背景,js设置鼠标悬停改变背景色实现详解

    看了网上那么多的js鼠标悬停时事件,大多数的,说了那么多话,也没解决什么问题,现在直接贴上代码,以供参考 html: this is test! css: .out{background-color: ...

  8. js——设置鼠标悬停事件

    鼠标悬停前后 function HoverAndMouseout(){$(".zhangjie").hover(function () {$(this).css({ "w ...

  9. FarPoint.Win.Spread 表格 鼠标悬停 展示表格数据 并且控制每行字数 代码备忘

          注册事件,并进行配置 //鼠标悬停 显示相关             this.spdMain.TextTipFetch += new FarPoint.Win.Spread.TextTi ...

最新文章

  1. 2019年中国智能制造的十大发展关键点
  2. 第十五届全国大学生智能车竞赛 室外光电组线上选拔赛比赛流程
  3. 深究AngularJS——过滤器(filter)
  4. Common Lisp 操作Mysql
  5. 【渝粤教育】广东开放大学 人工智能 形成性考核 (55)
  6. 连载 | 知识图谱发展报告 2018 -- 前言
  7. 字符串,数组,定时器,form
  8. matlab制作萨克斯音乐,Cmusic Productions SAXBAND Soprano Sax KONTAKT 萨克斯
  9. Flash 与数学:圆的切线(2)
  10. Stable Region Correspondences Between Non-Isometric Shapes
  11. 第五周-第13章节-Python3.5-内置模块详解之Hashlib、模块
  12. 机器学习--线性回归4(线性拟合、局部线性拟合实战)
  13. 新华三模拟器STP和RSTP及其MSTP的作用与配置
  14. Java Netty 初步
  15. sublime text3 eslint 安装教程
  16. 苹果手机屏幕镜像_微软应用上线屏幕镜像功能:可在PC端控制安卓手机
  17. genetic heterogeneity 遗传异质性
  18. linux如何后台执行程序?
  19. 一文了解大厂的DDD领域驱动设计
  20. C# 将方形图片剪切为圆形(winForm)

热门文章

  1. python 替换字符串的方法replace()、正则re.sub()
  2. 关于python 中的__future__模块
  3. SpringMVC——通俗易懂讲讲Ajax~
  4. Deep Learning部署TVM Golang运行时Runtime
  5. 单目摄像头标定与测距
  6. 使用Servlet完成单表的CRUD
  7. ❤️让人心跳加速的陌陌案例,大数据必需学会的基础案例!❤️ 【推荐收藏】
  8. 2021年大数据Spark(三十一):Spark On Hive
  9. python 判断字符串是否以数字结尾
  10. Android AlertDialog设置宽度显示不正常的问题