第四十二章 定位实例（三）

然后我们的问题是：这货怎么一直这么显示着，这不是我想要的结果啊，要是可以鼠标划到上面才显示，鼠标离开就隐藏有多好？当然了，这种效果几乎是各个网站所必备的。

第一步：我先把它隐藏掉，省得碍眼。

这个最简单了，给 #nav>ul>li>ul 选择器里面加一个属性就好，display:none;，意思就是显示方式是不显示。好了，不碍眼了，但是，他会一直隐藏，那就没什么作用了，所以：

第二步：鼠标滑过显示。我们说过鼠标滑过这个状态使用伪类 :hover 来表示。所以其实我们如下设置即可：

这里要理解的一个问题是，我们把鼠标划到哪个元素上，而显示出来的又是哪个元素？那么这里是当鼠标放在 #nav>ul>li 上面的时候，它里面的 ul 被显示出来。

那么我们预期的效果就达到了，大家要自己研究一下源码，定位这个问题在 CSS 里面是个很重要的问题。

然后我们开始下一个练习，给这个页面右下添加一个返回首页的按钮，就像很多网站都有的那样。大家应该都知道什么样子，他不随页面滚动，一直处于页面的右下角。

像这种浮于页面之上的东西，他并不占据什么位置。也很难说他在逻辑上属于什么元素。而且它的重要性也不是很高，只是增加用户体验，而不是用户打开页面所第一预期的内容。所以这种代码一般放在页尾，就是 </body> 标签的前面。

那么这个按钮写起来很简单的：

简单吧，一个链接而已，我们知道 # 可以链接到锚点，但是后面如果没有锚点名称，只是一个简单的 #，那就是链接到当前页面的顶部。其实说是滚动上去更贴切一些。里面文字什么的我就不用解释了吧。

然后给他设置样式：

这个太简单，不讲了。自己动手改改参数，或者把文字换成图片玩吧。下节课开始我们要给这个页面再加一些高大上的内容，哼唧~

效果见下图的右下角。

本章代码下载：本章代码