本文共 881 字，大约阅读时间需要 2 分钟。

< a>标签是一个超链接，最常用的方式是

<a href="url">我是超链接</a>

下面来说说超链接的另一种特效应用：

.像大型的网站，或者炫酷的网站，用户在点击不同的超链接的时候，都会有不同效果，可能会改变字体大小，改变背景等等，下面通过两种方法来试试。

**第一种方法：**

**1.首先了解一下链接的四种状态：**

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

这四种状态可以直接用，但是请注意

当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

**2.改变背景:**

背景色:background-color 属性规定链接的背景色：

   a:link {
   background-color:#B2FF99;}a:visited {
   background-color:#FFFF85;}a:hover {
   background-color:#FF704D;}a:active {
   background-color:#FF704D;}

**3.下划线:**

   a{ text-decoration:none}
   a{ text-decoration:underline}

贴代码，代码摘自W3School

请把鼠标指针移动到下面的链接上，看看它们的样式变化。
   
这个链接改变颜色
这个链接改变字体尺寸
这个链接改变背景色
这个链接改变字体
这个链接改变文本的装饰

看看运行效果：

或者这样：设置一个宽为120px的超链接框框，鼠标移到框框背景颜色变成#7A991A

W3School

看看运行效果：

**第二种方法：**

通过js方法改变

onmouseleave表示鼠标离开的动作 onmouseenter表示鼠标移到到区域 （其他方法请自行百度）

首页

运行效果图：