本文实例讲述了js实现鼠标感应图片展示的方法。分享给大家供大家参考。具体实现方法如下： 复制代码 代码如下: 鼠标感应的图片展示效果 <br /> body {<br /> background:#fff;<br /> font:small/1.5 "宋体", SimSun, serif;<br /> _font-size:medium;<br /> }<br /> a img {<br /> border:none;<br /> }<br /> ul,<br /> li,<br /> h5 {<br /> list-style:none inside;<br /> margin:0;<br /> padding:0;<br /> }<br /> .recomm {<br /> background:#999;<br /> border:1px solid #666;<br /> width:600px;<br /> height:170px;<br /> overflow:hidden;<br /> padding:10px;<br /> margin:0 auto;<br /> position:relative;<br /> }<br /> .recomm ul {<br /> border:1px solid #fff;<br /> border-left:none;<br /> height:168px;<br /> width:599px;<br /> overflow:hidden;<br /> *position:absolute; /* 解决IE中overflow:hidden无法正确隐藏元素的问题 */<br /> }<br /> .recomm li {<br /> float:left;<br /> position:relative;<br /> margin-right:-179px;<br /> height:100%;<br /> overflow:hidden;<br /> white-space:nowrap;<br /> text-align:center;<br /> }<br /> .recomm li img {<br /> display:block;<br /> border-left:1px solid #fff;<br /> width:248px;<br /> height:168px;<br /> }<br /> .recomm li h5 {<br /> position:absolute;<br /> bottom:0;<br /> left:0;<br /> height:20px;<br /> width:239px;<br /> line-height:20px;<br /> background:url(../images/1_211621.png) no-repeat;<br /> display:none;<br /> text-align:right;<br /> padding-right:10px;<br /> font-size:1em;<br /> font-weight:normal;<br /> }<br /> .recomm li:hover, .recomm .lay-on {<br /> width:249px;<br /> margin-right:0;<br /> }<br /> .recomm li:hover h5, .recomm .lay-on h5 {<br /> display:block;<br /> }<br /> 红叶传情 By 代码家园 2010.09.23 野花绽放 By 珊珊影视在线 2010.09.23 往事如茶 By 代码家园 2010.09.23 油菜花开 By 七彩影视 2010.09.23 玫瑰情思 By 代码家园 2010.09.23 小雏菊 By 珊珊影视 2010.09.23 希望本文所述对大家的javascript程序设计有所帮助。
