发布时间：2025-12-09 11:53:57 浏览次数：1
在
CSS中,使用超链接伪类来定义超链接在鼠标点击的不同时期的样式。
a:link{...}a:visited{...}a:hover{...}a:active{...}伪类 | 说明 |
|---|---|
a:link | 定义a元素未访问时的样式。 |
a:visited | 定义a元素访问后的样式。 |
a:hover | 定义鼠标经过a元素时的样式。 |
a:active | 定义鼠标点击激活时的样式。 |
定义这四个伪类时,必须按照
link、visited、hover、active的顺序进行,不然浏览器可能无法正常显示这4种样式。 这4种样式定义顺序不能改变。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <!--必须放在title标签及其它meta标签前--> <title>超链接样式样式</title> <!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> --> <style type="text/css"> /*先定义超链接未访问时的样式*/ a{ color:#66A9FE; text-decoration: none; /*去除a标签中默认样式的下划线*/ } /*再定义鼠标经过超链接时的样式*/ a:hover{ color:#FFD700; text-decoration:underline; /*添加下划线*/ } </style> </head> <body> <p > <a href="https://www.jianshu.com/p/b45241878b74" target="_blank">見贤思齊</a> <!--target="_blank"是在新窗口打开链接。--> </p> </body></html>超链接伪类示例1.jpg
在实际开发中,不是每一个超链接都需要定义4种状态,我们只会用到两种状态:未访问时状态和鼠标经过状态(a:hover)。 而对于未访问时状态,直接针对
a元素定义即可,没必要使用a:link,所以我们只需要记住a:hover即可,日后也只会用到这一个。
:hover伪类不是只限于a元素,而是可以定义任何一个元素在鼠标经过时的样式。:hover的应用十分广泛,任何一个网站都会大量运用它,一定要好好掌握。
为p设置伪类:hover<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <!--必须放在title标签及其它meta标签前--> <title>超链接样式样式</title> <!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> --> <style type="text/css"> /*先定义p未访问时的样式*/ #p1{ width: 400px; height:20px; color:#66A9FE; text-align:center; background-color: yellow; } /*再定义鼠标经过p时的样式*/ #p1:hover{ background-color: #AFEEEE; } </style> </head> <body> <p > 古之立大事者,不惟有超世之材,亦必有坚忍不拔之志。 </p> </body></html>为p设置伪类hover.png
为img设置伪类:hover<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <!--必须放在title标签及其它meta标签前--> <title>超链接样式样式</title> <!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> --> <style type="text/css"> img{ width: 200px; height: 150px; } img:hover{ border:5px dashed aquamarine; } </style> </head> <body> <img src="../img/panda.jpg" alt="是熊猫啊" title="是熊猫啊"> </body></html>为img设置伪类hover.png
在
CSS中,使用cursor属性来定义鼠标样式。
cursor:取值;属性值 |
|---|
default(默认值) |
pointer |
text |
crosshair |
wait |
help |
move |
e-resize或w-resize |
ne-resize或sw-resize |
n-resize或s-resize |
在实际开发中,一般只会用到
default(默认值)、pointer、text这三个,其它的很少使用。
② 示例
Ⅰ.例1
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <!--必须放在title标签及其它meta标签前--> <title>超链接样式样式</title> <!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> --> <style type="text/css"> p{ width: 100px; height: 25px; text-align: center; } #p1{ cursor: default; } #p2{ cursor: pointer; /*当鼠标移动到元素上时,鼠标呈手状*/ } </style> </head> <body> <p >鼠标默认样式</p> <p >鼠标手状样式</p> </body></html>还可以使用
cursor属性来自定义鼠标样式。 使用自定义鼠标样式可以使网站更加个性、美观大方,更能匹配网页的风格。
cursor:url(图片地址),属性值;图片地址即鼠标图片地址,鼠标图片后缀名一般都是
.cur,我们可以通过Photoshop制作。 而属性值一般是default(默认值)、pointer、text。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <!--必须放在title标签及其它meta标签前--> <title>超链接样式样式</title> <!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> --> <style type="text/css"> p{ width: 100px; height: 25px; text-align: center; } #p1{ cursor: url(../img/favicon.ico),default; /*对默认样式进行自定义*/ } #p2{ cursor: pointer; /*当鼠标移动到元素上时,鼠标呈手状*/ } </style> </head> <body> <p >鼠标默认样式</p> <p >鼠标手状样式</p> </body></html>免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流