次に、小さな画像の上にマウスをスライドすると、大きな画像と詳細情報が表示されるエフェクトを実現したいと思います。 <br> .thumbnail { <br> 位置: 相対; <br> z インデックス: 0; <br> } <br> .thumbnail:hover{ <br> 背景色: 透明; <br> .thumbnail スパン{ <br> 位置: 絶対; <br> 背景色: ライトイエロー; <br> 左: -600 ピクセル; <br> 表示: 非表示; <br> 幅: 220 ピクセル; ; <br> } <br> . サムネイル スパン img{ <br> ボーダー幅: 2px; <br> .thumbnail:hover スパン{ <br> 左: 60px; <br> ＆lt;/style＆gt;＆lt; datalist1 "repturecolumns =" 9 "horizontal" cellspacing = "9"＆gt; :0" ><br />テスト テスト テスト <br> <br> http://img 。 my.csdn.net/uploads/201304/16/1366081185_5840.jpg <br> <br> 次に、名前、価格などの詳細情報を全体像の下に追加したいと思います。はい、問題があります <br> <asp:DataList ID="DataList1" runat="server"RepeatColumns="9"RepeatDirection="水平" <br /> CellSpacing="9"> 「サムネイル」 href="#thumb"> ="100px" style="border :0" /> <br> " height="212px"><br /> <br> <asp:Label ID="Label1" runat="server" Text='<%#Eval("product_name") %>' Font-Bold ="true" Font-Size="14px" ForeColor="#0063DC"></asp:Label><br />￥<asp:Label ID="Label2" runat="server" Text='<%#Eval("product_price") %>' Font-Size="12px" Font-Bold="true" ForeColor= #FF6600"></asp:Label> <br> /asp:DataList> <br> これは機能せず、次のような結果になります。 <br> http://img.my.csdn.net/uploads/201304/16 /1366081185_6372.jpg <br> <br> 1行ずつ順番に表示するにはどうすればよいですか? <br> <br> </p> ディスカッションへの返信 (解決策) <br> <h2> <style type="text/css"> </h2> .thumbnail{ <p class="sougouAnswer"> z-index: 0; <br> <br> .thumbnail:hover{ <br> 背景-色: 透明; <br> z-index: 100; <br> .thumbnail スパン{ <br> 背景色: 明るい黄色; <br> 境界線: 1 ピクセル; <br> 可視性: 非表示; <br> テキスト装飾: なし; <br> 高さ: 320px; <br> .thumbnail の幅: 0; <br> .thumbnail スパン p{ <br> 位置: 左: 0px; 高さ: 20px; <br> .thumbnail: 表示範囲: 表示;上: 0; <br> 左: 60px; } <br> <DataList ID="DataList1" runat="server"RepeatColumns="9" <br /> ; <%# Eval("product_img") %>" id="oimg " alt="" width="100px" height="100px" style="border:0" /> <br> ;" border="0" width=" 212px" height="212px"> <br> <br> </asp:DataList> したがって、あなたのコードはie6<br>ではサポートされていません。 <br>りー<br><br>自分で変えてください。 Chrome や Firefox では直接スタイルを変更できます。 </p> <p class="sougouAnswer"> <style type="text/css"> <br> .thumbnail{ <br> position: relative; <br> z-index: 0; <br> } <br> <br> .thumbnail:hover{ <br> background-color: transparent; <br> z-index: 100; <br> } <br> <br> .thumbnail span{ <br> position: absolute; <br> …… <br> 我试了一下，可以是可以，但是我在绑定里面在加上一些比如说名称，价格之类的， <br> <asp:DataList ID="DataList1" runat="server" RepeatColumns="9" RepeatDirection="Horizontal" <br /> CellSpacing="9"> <br> <ItemTemplate> <br> <a class="thumbnail" href="#thumb"> <br> <img src="images/<%#Eval("product_img") %>" id="oimg" alt="" width="100px" height="100px" style="border:0" /> <br> <span><img src="images/<%#Eval("product_img") %>" border="0" width="212px" height="212px"> <br> <p> <br> <asp:Label ID="Label1" runat="server" Text='<%#Eval("product_name") %>' Font-Bold="true" Font-Size="14px" ForeColor="#0063DC"></asp:Label><br /> <br> ￥<asp:Label ID="Label2" runat="server" Text='<%#Eval("product_price") %>' Font-Size="12px" Font-Bold="true" ForeColor="#FF6600"></asp:Label> <br> </p> <br> </span></a> <br> </ItemTemplate> <br> </asp:DataList> <br> 效果就会变成下面这个样： <br> </p> <p class="sougouAnswer"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><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;} " id="oimg" alt="" width="100px" height="100px" style="border:0" /> " border="0" width="212px" height="212px"> 标题 价格 访问量 ログイン後にコピー XML/HTML code?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354.thumbnail{position: relative;z-index: 0;} .thumbna…… 我试过了，可以，现在还有一个问题，就是说我想让 标题变成标题 价格 访问量 上面三个各自加上自己的链接，但我一加上a href，鼠标还没等指上去这个弹出的层就消失了，这个要怎么改啊？麻烦你了，谢谢！ 有没有人知道了啊？帮帮忙啊
