[分享]css中a的点击效果

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标签点击效果的介绍，通过使用四个伪类，可以实现丰富的链接样式和交互效果。