Mouse over the small image to display the large image and detailed information_html/css_WEB-ITnose

What I want to achieve now is to display the large image and detailed information when the mouse slides over the small image. I found a piece of code on the Internet


CellSpacing="9">

t;
                                                                                    ;%#Eval("product_img") %>" id="oimg" alt="" width="100px" height="100px" style="border:0" />
;img src="images/" border="0" width="212px" height="212px">
Test Test Test

                                                                     ​🎜> http://img.my.csdn.net/uploads/201304/16/1366081185_5840.jpg

Now I want to add some detailed information under the big picture, such as name, price, etc. Yes, there is a problem
CellSpacing="9">
                                                                                                                                            alt="" width="100px" height="100px" style="border:0" />
                                                                                               >" border="0" width="212px" height="212px">

                            

￥
                                             
This won’t work , the effect is as follows
http://img.my.csdn.net/uploads/201304/16/1366081185_6372.jpg

How can I make it display in order line by line? ?

Reply to discussion (solution)

.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 p{
position:absolute; left:0px; bottom:0px; height:20px; line-height:20px; text-align :center;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}

CellSpacing="9">
🎜>                                                                           class="thumbnail" href="#thumb">
                                                                                ​100px" height="100px" style="border:0" />
                                                                             " width="212px" height="212px">
                                                                                                                                                      🎜>                                                                                                                      Change it yourself. The style can be changed directly. No problem in chrome and 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="Mouse over the small image to display the large image and detailed information_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="Mouse over the small image to display the large image and detailed information_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，鼠标还没等指上去这个弹出的层就消失了，这个要怎么改啊？麻烦你了，谢谢！

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