1．创建一个新的HTML文件百，该文件被称为测试。标题是“CSS实现的鼠标在导航栏上显示的超链接的下划线效果”。
2．在页面上写nav标签，放入三个超链接（首页，第一栏，第二栏），代码如下。
3．运行代码，效果如下。
4．使用backCSS来美化字体大小、颜色和导航字体的排列。守则如下。
5．运行代码，效果如下：可见，经过CSS样式美化，当鼠标经过时，显示蓝色。
6．使用CSS代码，实现鼠标在上面显示下划线效果，代码如下。
7．在浏览器中运行代码以达到预期的效果。
css样式里{cursor:hand;}
这个是手形的图标
{cursor:move;}
这个是移动的图标
{cursor:wait;}
这个是等待的图标
{cursor:help;}
这个是帮助的图标
这里我就写4个
还有很多
可以自己去查
百度搜索里打
CSS
鼠标效果
就能查到
设置css hover属性，
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
/设置div的样式/
test{
margin-left: 200px;/设置div的左边距/
margin-top: 200px;/设置div的上边距/
height: 100px;/设置div的高度/
width: 100px;/设置div的宽度/
background: red;/设置div的颜色为红色/
}
/鼠标经过时/
test:hover{
background: blue;/鼠标经过时div的颜色变为蓝色/
}
</style>
<body>
<div class="test"></div>/加个div/
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）