首页 前端知识 html中a:link、a:hover、a:active、a:visited的用法以及注意事项

html中a:link、a:hover、a:active、a:visited的用法以及注意事项

2024-03-15 10:03:48 前端知识 前端哥 744 666 我要收藏

在这里我设置了表格里的文字设置链接,然后设置:

  • 链接刚开始的文字颜色:黑色

  • 链接刚开始的背景颜色:绿色

  • 鼠标悬停时文字颜色:蓝色(背景颜色不变)

  • 点击链接时文字颜色:红色

  • 点击链接时背景颜色:蓝色

  • 链接访问过之后文字颜色:紫色

  • 然后又重新设置了一下链接访问过的背景颜色,因为如果不设置背景颜色,就会恢复成默认的白色,这里是将背景颜色设置成了最开始的背景颜色

<!DOCTYPE html>
<html>
<head>
<style>
/*link:链接正常的样式;*/
a:link{
display:block;
width: 100px;
color:black;
background-color:green;
text-align:center;
font-weight: bold;
text-decoration: none;/*不显示下划线*/
}
/*鼠标悬停的样式*/
a:hover{
color:blue;
text-align:center;
text-decoration: none;
}
/*鼠标点击的样式*/
a:active{
color:red;
background-color:blue;
text-align:center;
text-decoration: none;
}
/*链接访问过的样式*/
a:visited{
text-align:center;
color:purple;
background-color:green;/*因为如果不设置背景颜色,就会恢复成默认的白色,这里是将背景颜色设置成了最开始的背景颜色*/
text-decoration: none;
}
</style>
</head>
    <body>
<table>
<tr>
                //以下设置均为空标签,主要观看颜色变化比较方便
<td><a href="#">标签一</a></td>
<td><a href="#">标签二</a></td>
<td><a href="#">标签三</a></td>
<td><a href="#">标签四</a></td>
<td><a href="#">标签五</a></td>
<td><a href="#">标签六</a></td>
</tr>
</table>
</body>
</html>
复制

遇到的问题:

  1. 运行html文件后,悬浮和点击链接时没有颜色变化

可以检查一下这四个样式设置的顺序,在最开始我将a:link放在了最后,当我将a:link放在了最开始的时候就正确了

  1. 点击一个链接之后,返回网页,所有的链接都变成已访问过的颜色

是不是在测试的效果的时候都点过所有的链接,这里浏览器会有缓存记录,可以换一个浏览器试试

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3833.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

jQuery之class类操作

2024-04-12 20:04:54

jQuery 菜鸟教程学习

2024-04-12 20:04:22

jQuery

2024-01-31 12:01:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!