4、关于遮罩层。之前想到将整个大容器添加一个遮罩层，这种做法不可取。当鼠标悬停，大容器的遮罩层的透明度不为0，即便此时对单列表容器的遮罩层设置透明度也无法消除大容器的遮罩层所带来的影响。正确的做法应该是，对每个列表使用遮罩层，在鼠标悬停时:.wrap:hover .mask{opacity:0.15}.wrap:hover .mask:hover{opacity:0}这样做就不会出现叠加效应，因为都是对一个样式进行的设置，这里还要对比权值（汲取前面的经验）。
下面我们用原生的Javascript方法来实现：
在写之前，我们先理一下我们的思路，在前面的手风琴效果中我们只需要改变单一的宽度就行了，但是在这里我们的要求就高了很多。在CSS部分，我们已经有了变换效果的雏形，我们将class="big"添加到任意li中，该li就会发生改变。知道这里，我们接下来的做法又变得简单了。如何修改li中的class？我的思路如下：
首先写出一个主函数体获取元素li -》 list，然后list进行for循环，在for循环中进行绑定bind的鼠标点击事件，bind(list[i],"mouseover", mouseoverHandler);（mouseoverHandler 是mouseover的回调……）代码如下：
function initList() { //取得每个列表项 var list = document.getElementsByTagName("li"); for(var i = 0; i < list.length; i++) { //对每个列表绑定鼠标悬停事件的监听 bind(list[i], "mouseover", mouseoverHandler); } }
然后我们来写事件的绑定，需要判断是标准事件绑定还是ie事件绑定，然后执行不同的操作，代码如下：