css中a的点击效果

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中的a标签被广泛地用于创建超链接,不仅可以将文本或图片链接到其他页面或站点,还可以使用伪类实现点击效果。a:link { /* 未访问过的链接 */ } a:visited { /* 已访问过的

CSS中的a标签被广泛地用于创建超链接,不仅可以将文本或图片链接到其他页面或站点,还可以使用伪类实现点击效果。

a:link {
  /* 未访问过的链接 */
}

a:visited {
  /* 已访问过的链接 */
}

a:hover {
  /* 鼠标悬停时的效果 */
}

a:active {
  /* 鼠标点击时的效果 */
} 

:link和:visited分别控制链接的默认样式和已访问链接的样式,这两个伪类使用最为广泛,如下所示:

a:link {
  color: blue;
  text-decoration: underline;
}

a:visited {
  color: purple;
} 

代码中,:link伪类将链接的颜色设置为蓝色,:visited将颜色设置为紫色。使用text-decoration属性可以为链接添加下划线或删除线,如text-decoration:underline。

:hover用于设置鼠标悬停时的效果,可以为链接添加背景颜色、修改文字颜色或调整边框样式:

a:hover {
  background-color: yellow;
  color: black;
  border: 1px solid red;
} 

代码中为链接悬停时添加了黄色背景色、黑色字体颜色和红色边框1px宽。使用:border可以调整边框的样式和宽度。

:active伪类用于设置鼠标点击时的效果,通常用于按钮或链接点击后显示按下效果:

a:active {
  background-color: #b3b3b3;
  color: white;
  border: 1px solid black;
  box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5);
} 

代码中为链接点击时添加了浅灰色背景、白色字体颜色、黑色边框和内阴影效果。使用box-shadow属性可以为元素添加阴影效果,如box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5)。

以上是关于CSS中a标签点击效果的介绍,通过使用四个伪类,可以实现丰富的链接样式和交互效果。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中a的点击效果

粉丝

0

关注

0

收藏

0

已有0次打赏