1.CSS中设置超链接
可能大家看着上面这个伪类语法不太好理解，其实它就是我们平时访问某一个网页时，把鼠标放在某个链接上面，然后那个链接就会改变其颜色样式。废话不多说，下面直接上实例代码：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="generator" content="EditPlus®"/> <meta name="author" content=""/> <meta name="keywords" content=""/> <meta name="description" content=""/> <title>超链接下划线</title> <style> a{color: red; font-size: 16px; text-decoration: none;} a:hover{text-decoration: underline;} </style> </head> <body> <a href="https://www.baidu.com">我是一个a标签，悬浮添加下划线</a> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>超链接下划线</title> <style> a{color: black; font-size: 16px; text-decoration: none;} a:hover{color: red; text-decoration: underline;} </style> </head> <body> <a href="https://www.tencent.com">我是一个a标签，悬浮字体变红并添加下划线</a> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>仿京东读书页面</title> <style> a{color: dodgerblue; font-size: 16px; margin:0 8px; text-decoration: none;} a:hover{color: crimson; text-decoration: underline;} </style> </head> <body> <a href="https://www.jd.com/">社科经典</a><a href="https://www.jd.com/">文学名著</a><a href="https://www.jd.com/">政治军事</a> </body> </html>
2.CSS中设置鼠标形状
这里的鼠标形状是通过标签 cursor 来设置的，常见的一些鼠标形状如上图所示。下面我们来看一个实例：👇👇👇
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="gb2312"/> <title>设置鼠标形状</title> <style type="text/css"> img { border: 0px; } p { font-size: 14px; } a { color: crimson; text-decoration: none; } a:hover { color: dodgerblue; text-decoration: underline; cursor: help; } span { cursor: pointer; } </style> </head> <body> <p><a href="#"><img src="E:\计算机专业学习资料和文件\HTML\image\hetao.jpg" alt="无漂白薄皮核桃" /></a></p> <p><a href="#">楼兰蜜语新疆野生</a> <a href="#">无漂白薄皮核桃</a></p> <p><span>500gx2包 ￥48.8</span></p> <p style="cursor: wait;">等待的结果</p> </body> </html>
这里当我们把鼠标悬浮在图片和不同的字体之上时，鼠标就会变成相应的形状，各不相同，根据喜好自行设置即可。
