鼠标悬停，导航，评价功能的实现（一）

一、鼠标悬停时背景改变的实现有三种方式：

1，通过矩形框，添加悬停时改变矩形框的属性来实现变化

2，通过image map，当悬停时改变部件装载的图片来实现，一个image支持5张图片（与矩形框相比，image的优势在于可以透明，但是在编辑时是淡蓝色的，可以看到位置。而矩形框一直是“隐身”的！）

image map的另一个特殊用法是他可以在一张大的image上实现局部超链接

注意：图片素材要事先准备好

3，通过改变动态面板的状态来实现（五个状态）

这几个方法在功能强大上来说是递进关系,除非是小部件的单独效果，想要得到整体的变化还是要用动态面板来实现，我已经上了一次当，引以为戒。

二、导航

以淘宝网的分类导航为例：

http://www.taobao.com

先把大致情况列出来：

构思好了之后，开始想如何实现：

在做的时候遇到的问题：

1，因为想要把三种方法联系一下，所以第一次采用的1,2方法来实现悬停效果，结果出了问题，由于悬停时是一个整体在变化，所以必须用方法3

2，看了老师的案子，发现自己只做一个一级导航是不能全部说明问题的，因为当分类多了，问题就会出现：

先隐藏所有的B级分类，是为了避免悬停到某一级是出现两个B级分类。后面的设置为normal也是差不多的道理。

最后两步是真正想要的效果，也是很多人只能添加的效果

3，对哪一个部件添加效果，就是针对把一个部件产生作用，值得一提的是移入和移出的实现，

对于上图的矩形框来说，如果鼠标移动到了图一上，也是相当于移出了矩形框

为了实现移出移入效果，可以在特定区域添加一个透明矩形框来帮助实现