小さな画像の上にマウスを置くと、大きな画像と詳細情報が表示されます_html/css_WEB-ITnose

次に、小さな画像の上にマウスをスライドすると、大きな画像と詳細情報が表示されるエフェクトを実現したいと思います。
080b747a20f9163200dd0a7d304ba388
.thumbnail {
位置: 相対;
z インデックス: 0;
}
.thumbnail:hover{
背景色: 透明;
.thumbnail スパン{
位置: 絶対;
背景色: ライトイエロー;
左: -600 ピクセル;
表示: 非表示;
幅: 220 ピクセル; ;
}
. サムネイル スパン img{
ボーダー幅: 2px;
.thumbnail:hover スパン{
左: 60px;
＆lt;/style＆gt;＆lt; datalist1 "repturecolumns =" 9 "horizo​​ntal" cellspacing = "9"＆gt; :0" >df250b2156c434f3390392d09b1c9563テスト テスト テスト

http://img 。 my.csdn.net/uploads/201304/16/1366081185_5840.jpg

次に、名前、価格などの詳細情報を全体像の下に追加したいと思います。はい、問題があります
f4b829a8667d7c727fc090b5b95cec0f 「サムネイル」 href="#thumb"> ="100px" style="border :0" />
" height="212px">df250b2156c434f3390392d09b1c9563
4847c973cf379d1a5b1d8a06c8892cd7' Font-Bold ="true" Font-Size="14px" ForeColor="#0063DC">ea24c5d4ae976f2f2c2f318934a7a898df250b2156c434f3390392d09b1c9563￥92ccea75731e8269dc07e7ff126671e5' Font-Size="12px" Font-Bold="true" ForeColor= #FF6600">ea24c5d4ae976f2f2c2f318934a7a898
/asp:DataList>
これは機能せず、次のような結果になります。
http://img.my.csdn.net/uploads/201304/16 /1366081185_6372.jpg

1行ずつ順番に表示するにはどうすればよいですか?

ディスカッションへの返信 (解決策)

080b747a20f9163200dd0a7d304ba388

.thumbnail{

z-index: 0;

.thumbnail:hover{
背景-色: 透明;
z-index: 100;
.thumbnail スパン{
背景色: 明るい黄色;
境界線: 1 ピクセル;
可視性: 非表示;
テキスト装飾: なし;
高さ: 320px;
.thumbnail の幅: 0;
.thumbnail スパン p{
位置: 左: 0px; 高さ: 20px;
.thumbnail: 表示範囲: 表示;上: 0;
左: 60px; }
c155ea59aa6b590fd1ed60d3850c0788" id="oimg " alt="" width="100px" height="100px" style="border:0" />
;" border="0" width=" 212px" height="212px">

8248825988af32b75a11877c744a352b したがって、あなたのコードはie6
ではサポートされていません。
りー

自分で変えてください。 Chrome や Firefox では直接スタイルを変更できます。

46d5fe1c7617e3914f214aaf043f4ccf
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 100;
}

.thumbnail span{
position: absolute;
……
我试了一下，可以是可以，但是我在绑定里面在加上一些比如说名称，价格之类的，
61f7e3f05ea9991a9092f90f6a17fbe6
                0fc5c90f257c8bbe709da427d559475b
                    e3ab4b14faaf55b64782361bbf44f7d2
                   d8aa421a1cfb5f33f2a9bcc34104a9e1" id="oimg" alt="" width="100px" height="100px" style="border:0" />
                   45a2772a6b6107b401db3c9b82c049c2d8aa421a1cfb5f33f2a9bcc34104a9e1" border="0" width="212px" height="212px">
                   e388a4556c0f65e1904146cc1a846bee
                   70cd263e14e38d25bd2565bdbcc581df' Font-Bold="true" Font-Size="14px" ForeColor="#0063DC">ea24c5d4ae976f2f2c2f318934a7a898ff9d32c555bb1d9133a29eb4371c1213
                   ￥827e4a0403aa73446e2295cf5c4b91a9' Font-Size="12px" Font-Bold="true" ForeColor="#FF6600">ea24c5d4ae976f2f2c2f318934a7a898
                   94b3e26ee717c64999d7867364b1b4a3
                   54bdf357c58b8a65c66d7c19c8e4d1145db79b134e9f6b82c0b36e0489ee08ed
                247b94fc9b32a7a895c80acdf798d00f
            8248825988af32b75a11877c744a352b
效果就会变成下面这个样：

<style type="text/css">.thumbnail{position: relative;z-index: 0;}.thumbnail:hover{background-color: transparent;z-index: 100;}.thumbnail span{position: absolute;background-color: lightyellow;padding: 5px;left: -600px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;width:220px;height:320px;}.thumbnail span img{border-width: 0;padding: 2px;}.thumbnail span div{position:absolute; left:0px; bottom:0px;}.thumbnail span div p{	clear:both; height:20px; line-height:20px; text-align:center; overflow:hidden;}.thumbnail:hover span{visibility: visible;top: 0;left: 60px;}</style><asp:DataList ID="DataList1" runat="server" RepeatColumns="9" RepeatDirection="Horizontal"                CellSpacing="9">                <ItemTemplate>                    <a class="thumbnail" href="#thumb">                   <img src="images/<%#Eval("product_img") %>" id="oimg" alt="" width="100px" height="100px" style="border:0" />                   <span><img src="images/<%#Eval("product_img") %>" border="0" width="212px" height="212px">                   <div>				   				   <P>标题</P>				   <P>价格</P>				   <P>访问量</P>				   </div>                   </span></a>                </ItemTemplate>            </asp:DataList>

XML/HTML code?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535446d5fe1c7617e3914f214aaf043f4ccf.thumbnail{position: relative;z-index: 0;} .thumbna……
我试过了，可以，现在还有一个问题，就是说我想让
64e5601d0a941f4972a2954192bdae18标题ee2bfd64228f824cf6027e0da2815b78变成e388a4556c0f65e1904146cc1a846beea8861386decccdb9bf88c0a114fa7f3b标题5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3
64e5601d0a941f4972a2954192bdae18价格ee2bfd64228f824cf6027e0da2815b78
64e5601d0a941f4972a2954192bdae18访问量ee2bfd64228f824cf6027e0da2815b78
上面三个各自加上自己的链接，但我一加上a href，鼠标还没等指上去这个弹出的层就消失了，这个要怎么改啊？麻烦你了，谢谢！

有没有人知道了啊？帮帮忙啊