1.超链接伪类
在CSS中，我们可以使用“超链接伪类”来定义超链接在鼠标单击的不同时期的样式语法：
a:link{…} a:visited{…} a:hover{…} a:active{…}
必须按照“实例：”的顺序进行link、visited、hover、active定义4个伪类，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <style type="text/css"> a { text-decoration: none; } a:link{color: black;} a:visited{color: red;} a:hover{color: purple;} a:active{color: orange;} </style> </head> <body> <a href="https://www.baidu.com/">百度网</a> </body> </html>
2.深入了解:hover
“:hover”伪类可以定义任何一个元素在鼠标经过时的样式:
hover用于div
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <style type="text/css"> div { width: 200px; height: 200px; } div:hover { color: red; } </style> </head> <body> <div> 我的世界 </div> </body> </html>
鼠标移动到div块处，div块会变色：
:hover用于img
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <style type="text/css"> img:hover { border: 5px solid orange; } </style> </head> <body> <img src="https://img2.baidu.com/it/u=1644941556,604602934&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"/> </body> </html>
鼠标移动到图片处，图片会自动添加边框：
3.鼠标样式
在CSS中，对于鼠标样式的定义，我们有两种方式：浏览器鼠标样式和自定义鼠标样式
浏览器鼠标样式
在CSS中，我们可以使用cursor属性来定义鼠标样式
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <style type="text/css"> div { width: 200px; height: 200px; background-color: blue; cursor: wait; } </style> </head> <body> <div> </div> </body> </html>
该实例，鼠标点击div块时，会改变当前鼠标的样式为等待
自定义鼠标样式
语法：
cursor:url（图片地址）,属性值;
这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是“.cur”，我们可以使用一些小软件来制作
这个“属性值”一般只会用到3个，分别是default、pointer和text。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <style type="text/css"> div { width: 200px; height: 200px; background-color: blue; cursor: url("xxx"),pointer; } </style> </head> <body> <div> </div> </body> </html>
