超链接点击前后的应用，包括背景、字体大小等等
程序员文章站
2022-04-29 18:29:55
...
< 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 属性规定链接的背景色：
<!--通过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
<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:'微软雅黑';}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>请把鼠标指针移动到下面的链接上，看看它们的样式变化。</p>
<!--target="_blank"表示打开一个新窗口-->
<p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体尺寸</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本的装饰</a></b></p>
</body>
</html>看看运行效果：
或者这样：设置一个宽为120px的超链接框框，鼠标移到框框背景颜色变成#7A991A
<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="/index.html" target="_blank">W3School</a>
</body>
</html>
看看运行效果：
**第二种方法：**
通过js方法改变
onmouseleave表示鼠标离开的动作
onmouseenter表示鼠标移到到区域
（其他方法请自行百度）
<a
onmouseleave="this.style.borderColor='#e30083'; this.style.backgroundColor='transparent'; this.style.color='#e30083';" onmouseenter="this.style.backgroundColor='#e30083'; this.style.borderColor='#e30083'; this.style.color='#ffffff';" style="font-family: 微软雅黑; font-size: 20px; padding: 8px 20px; border-width: 1px; border-color: rgb(227, 0, 131); color: rgb(227, 0, 131); background-color: transparent;">
首页
</a>运行效果图：
下一篇： HTML中的table表格标签