jQuery实现鼠标滑过图片列表加遮罩层

这个例子实现的功能是：有一列图片列表，鼠标滑过时，将有遮罩层的另一张图盖在该图片的上方，实现鼠标hover的效果。

一、HTML代码：

<div class="home-content clearfix">
    <ul class="app-page">
        <li class="unit-app">
            <div class="app-ico">
                <img class="menu-ico" src="../styles/images/jt_normal.png" />
            </div>
            <div class="ico-hover-img"></div>
        </li>
        <li class="unit-app">
            <div class="app-ico">
                <img class="menu-ico" src="../styles/images/jt_normal.png" />
            </div>
            <div class="ico-hover-img"></div>
        </li>
        <li class="unit-app">
            <div class="app-ico">
                <img class="menu-ico" src="../styles/images/jt_normal.png" />
            </div>
            <div class="ico-hover-img"></div>
        </li>
        <li class="unit-app">
            <div class="app-ico">
                <img class="menu-ico" src="../styles/images/jt_normal.png" />
            </div>
            <div class="ico-hover-img"></div>
        </li>
    </ul>
</div>

二、CSS代码：

.clearfix {
    *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}

.clearfix:after {
    clear: both;
}

.app-page {
    width: 980px;    /* 根据每一列图片宽度决定该元素大小，一列为240px，四列即为960px，外加每一列margin的值 */
    height: inherit;
    margin: 0 auto;
}

.app-page .unit-app {
    position: relative;
    float: left;
    cursor: pointer;
    width: 240px;    /* 图片宽度 */
    margin-right: 5px;
}

.app-page .unit-app .app-ico {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    *zoom: 1;
}

.app-ico:hover {
    background: url(../images/light.png) no-repeat center center;    /* 鼠标hover时，背景图是遮罩的图 */
}

.menu-ico {
    display: inline-block;
    width: 240px;    /* 图片宽度 */
    height: 195px;    /* 图片高度 */
}

 三、JS代码：

$(function(){
    
    // 鼠标hover事件
    $(".unit-app").hover(function(){
        $(".unit-app").find(".ico-hover-img").hide();
        $(this).find(".ico-hover-img").show();
    }, function(){
        $(this).find(".ico-hover-img").hide();
    });
});