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

次に、小さな画像の上にマウスをスライドすると、大きな画像と詳細情報が表示されるエフェクトを実現したいと思います。

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

.thumbnail{

z-index: 0;

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

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

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

                   
                
            
效果就会变成下面这个样：

<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="/static/imghwm/default1.png"  data-src="images/<%#Eval("  class="lazy"  product_img") % alt="小さな画像の上にマウスを置くと、大きな画像と詳細情報が表示されます_html/css_WEB-ITnose" >" id="oimg" alt="" width="100px" height="100px"   style="max-width:90%" />                   <span><img  src="/static/imghwm/default1.png"  data-src="images/<%#Eval("  class="lazy"  product_img") % alt="小さな画像の上にマウスを置くと、大きな画像と詳細情報が表示されます_html/css_WEB-ITnose" >" border="0" width="212px" height="212px">                   <div>				   				   <P>标题</P>				   <P>价格</P>				   <P>访问量</P>				   </div>                   </span></a>                </ItemTemplate>            </asp:DataList>

XML/HTML code?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

变成

标题

价格

访问量

上面三个各自加上自己的链接，但我一加上a href，鼠标还没等指上去这个弹出的层就消失了，这个要怎么改啊？麻烦你了，谢谢！

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