この記事の例では、js を使用してマウスに反応する画像を表示する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。 コードをコピー コードは次のとおりです: <頭> ネズミ感のある写真の展示効果 <br> ボディ{<br> 背景:#fff;<br> font:small/1.5 "宋体"、SimSun、セリフ;<br> _font-size:medium;<br> }<br> 画像 {<br> 境界線:なし;<br> }<br> ウル、<br> リー、<br> h5 {<br> リストスタイル:内部になし;<br> マージン:0;<br> パディング:0;<br> }<br> .recomm {<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中overflow:hidden無法正确隐藏元素的问题 */<br> }<br> .recomm li {<br> float:left;<br> 位置:相対;<br> margin-right:-179px;<br> 高さ:100%;<br> オーバーフロー:非表示;<br> ホワイトスペース:nowrap;<br> text-align:center;<br> }<br> .recomm li img {<br> 表示:ブロック;<br> border-left: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> text-align:right;<br> パディング右:10px;<br> font-size:1em;<br> フォントの太さ:標準;<br> }<br> .recomm li:hover、.recomm .lay-on {<br> 幅:249px;<br> margin-right:0;<br> }<br> .recomm li:hover h5、.recomm .lay-on h5 {<br> 表示:ブロック;<br> }<br> 红叶传情 By 代码家园 2010.09.23 野花绽放 By 珊珊影视在線上 2010.09.23 往事如茶 By 代码家园 2010.09.23 油菜花开 By 七彩影視 2010.09.23 Rose Love By コード ホーム 2010.09.23 リトル デイジー By シャンシャン映画とテレビ 2010.09.23
