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

一、HTML代码：

二、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();    });});