1．创建一个新的HTML文件百，该文件被称为测试。标题是“CSS实现的鼠标在导航栏上显示的超链接的下划线效果”。
2．在页面上写nav标签，放入三个超链接（首页，第一栏，第二栏），代码如下。
3．运行代码，效果如下。
4．使用backCSS来美化字体大小、颜色和导航字体的排列。守则如下。
5．运行代码，效果如下：可见，经过CSS样式美化，当鼠标经过时，显示蓝色。
6．使用CSS代码，实现鼠标在上面显示下划线效果，代码如下。
7．在浏览器中运行代码以达到预期的效果。
给按钮上绑定一个onclick事件，同时置一个状态值，状态值为true时显示按钮。
具体代码如下：
<html>
<head>
<script type="text/javascript" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_f2fb5194.js"></script>
</head>
<body>
<button id="a">btn1</button>
<button id="b">btn2</button>
<script>
$(document).ready(function()
{
$("#a").click(function()
{
$("#a").hide()
})
$("#b").click(function()
{
$("#a").show()
}
)
})
</script>
</body>
</html>
1、准备切换图片素材，一般是两张，如图，放入img文件夹，跟HTML同级。
2、然后用img嵌入到网页，嵌入其中的一张，另外一张待会切换。
3、如图，现在是静态的，鼠标放上去也不会产生切换反应，因为没有用JS。
4、如图，获取img，转成JS对象，加个[0]就可以转js对象了。
5、然后设定经过事件，切换成另一张图片，这样就产生鼠标经过切换图片的效果了。
6、但是一旦鼠标离开了，就要切换回原来的图片素材，所以再加一个离开事件，这样离开后就变换成原来的图片。
7、如图，现在我的鼠标在图片上，就变成twopicture了。
