本文實例講述了js實現滑鼠感應圖片展示的方法。分享給大家供大家參考。具體實作方法如下： 複製程式碼 程式碼如下: 感應滑鼠的圖片展示效果 <br /> 身體{<br /> 背景：#fff;<br /> 字體:small/1.5 "宋體", SimSun, serif;<br /> _字體大小：中；<br /> }<br /> 一張圖片 {<br /> 邊框：無；<br /> }<br /> ul，<br /> 李，<br /> h5 {<br /> 列表樣式：裡面沒有；<br /> 邊距：0；<br /> 填充：0；<br /> }<br /> .推薦{<br /> 背景：#999;<br /> 邊框：1px 實心 #666;<br /> 寬度：600px；<br /> 高度：170px；<br /> 溢出：隱藏；<br /> 內邊距：10px；<br /> 邊距：0 自動；<br /> 位置：相對；<br /> }<br /> .recomm ul {<br /> 邊框：1px實線#fff;<br /> 左邊框：無；<br /> 高度：168px；<br /> 寬度：599px；<br /> 溢出：隱藏；<br /> *位置：絕對； /* 解決 IE 中溢位：隱藏無法隱藏正確元素的問題 */<br /> }<br /> .recomm li {<br /> 浮動：左；<br /> 位置：相對；<br /> 右邊距：-179px;<br /> 高度:100%;<br /> 溢出：隱藏；<br /> 空白：nowrap;<br /> 文字對齊：居中；<br /> }<br /> .recomm li img {<br /> 顯示：區塊；<br /> 左邊框：1px 實線 #fff;<br /> 寬度：248px；<br /> 高度：168px；<br /> }<br /> .recomm li h5 {<br /> 位置：絕對；<br /> 底部:0;<br /> 左：0；<br /> 高度：20px；<br /> 寬度：239px；<br /> 行高：20px;<br /> 背景：url(../images/1_211621.png) 不重複；<br /> 顯示：無；<br /> 文字對齊：右；<br /> 右內邊距：10px;<br /> 字體大小：1em;<br /> 字體粗細：正常；<br /> }<br /> .recomm li:懸停，.recomm .lay-on {<br /> 寬度：249px；<br /> 右邊距:0;<br /> }<br /> .recomm li:懸停 h5, .recomm .lay-on h5 {<br /> 顯示：區塊；<br /> }<br /> </風格><br /> </頭><br /> <身體><br /> <div class="recomm"><br /> <ul><br /> <li class="hovereffect"><a href="/" title="觀觀圖片詳細資料"><img src="/images/m01.jpg" alt="js實作滑鼠感應圖片展示的方法_javascript技巧" title= "這裡是圖片標題" /><br /> <h5>js實作滑鼠感應圖片展示的方法_javascript技巧 作者：<a href="/" title="訪問代碼家園">代碼家園 2010.09.23<br /> <br /> <li class="hovereffect"><a href="/" title="該觀賞圖片詳細資料"><img src="/images/m02.jpg" alt="js實作滑鼠感應圖片展示的方法_javascript技巧" title= "這裡是圖片標題" /><br /> <h5>js實作滑鼠感應圖片展示的方法_javascript技巧 作者：<a href="/" title="訪問珊珊影視在線">珊珊影視在線 2010.09.23<br /> <br /> <li class="hovereffect"><a href="/" title="觀觀圖片詳細資料"><img src="/images/m03.jpg" alt="js實作滑鼠感應圖片展示的方法_javascript技巧" title ="這裡是圖片標題" /><br /> <h5>js實作滑鼠感應圖片展示的方法_javascript技巧 作者：<a href="/" title="訪問代碼家園">代碼家園 2010.09.23<br /> <br /> <li class="hovereffect"><a href="/" title="觀觀圖片詳細資料"><img src="/images/m04.jpg" alt="js實作滑鼠感應圖片展示的方法_javascript技巧" title ="這裡是圖片標題" /><br /> <h5>js實作滑鼠感應圖片展示的方法_javascript技巧 作者：<a href="/" title="訪問七彩影視">七彩影視 2010.09.23<br /> <br /> <li class="hovereffect"><a href="/" title="觀賞圖片詳細資料"><img src="/images/m05.jpg" alt="js實作滑鼠感應圖片展示的方法_javascript技巧" title= "這裡是圖片標題" /><br /><h5>js實作滑鼠感應圖片展示的方法_javascript技巧 By <a href="/" title="訪問代碼家園">代碼家園 2010.09.23<br /> <br /> <li class="hovereffect"><a href="/" title="觀賞圖片詳細資料"><img src="/images/m09.jpg" alt="js實作滑鼠感應圖片展示的方法_javascript技巧" title="這裡是圖片標題" /><br /> <h5>js實作滑鼠感應圖片展示的方法_javascript技巧 By <a href="/" title="訪問珊珊影視在線">珊珊影視 2010.09.23<br /> <br /> <br />
