兼容IE6下，各种浏览器，鼠标滑动img图片阴影效果

以下为源码：

Html源码

mutal为事件触发层

shade为遮罩层

mutual内不要有空格，不然ie6下会有text的bug，会导致阴影加高。

<!-- mutual 标签内不要有空格 --><a class="mutual" href=""><img src="" width="237" height="358"><div class="shade"></div></a>

Css源码：（less形式）

shade层需要绝对定位，top，left，right，bottom，均为零。背景图片shade.jpg，可以是一个1px*1px的纯黑色背景图片，通过repeat进行平铺。原始透明度为0即为全透明。

mutual:hover下更改shade遮罩层的透明度，使之变为一个透明的阴影层。

IE6下shade必须要有高度才能显示出来。需要添加_height.

.mutual{
    display: block;
    width: 237px;
    height: auto;
    position: relative;
    _overflow:hidden;
    img{
        width: 237px;
        border: 0px;　　　　　vertical-align:top;　
    }
    .shade{
        background: url(../css/img/shade.jpg) repeat;
        filter:alpha(opacity=00);
        -moz-opacity:0.0;
        -khtml-opacity: 0.0;
        opacity: 0.0;
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        width: 100%;
        _height:1000px;
        cursor: pointer;
    }
&:hover{
     .shade{
         filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
     }
}