鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose

我现在要实现一个效果是鼠标滑过小图时显示大图和详细信息，我在网上找了段代码

.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:hover span{
visibility: visible;
top: 0;
left: 60px;
}


CellSpacing="9">


" id="oimg" alt="" width="100px" height="100px" style="border:0" />
" border="0" width="212px" height="212px">
测试测试测试



这个实现的效果图如下：（如果看不见图片的就看链接地址）
http://img.my.csdn.net/uploads/201304/16/1366081185_5840.jpg

现在我要在大图下再加上几个详细信息，像名称，价格之类的，就出现问题了
CellSpacing="9">


" id="oimg" alt="" width="100px" height="100px" style="border:0" />
" border="0" width="212px" height="212px">

' Font-Bold="true" Font-Size="14px" ForeColor="#0063DC">

￥' Font-Size="12px" Font-Bold="true" ForeColor="#FF6600">



这个就不行了，效果就成了下面这样
http://img.my.csdn.net/uploads/201304/16/1366081185_6372.jpg

要怎么该才能让它一行一行的按顺序显示呢？

回复讨论(解决方案)

.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">


" id="oimg" alt="" width="100px" height="100px" style="border:0" />
" border="0" width="212px" height="212px">

测试测试测试

这样呢，你这个代码，ie6是不支持

     无标题文档  img {		border:0;		}.over { /*鼠标放入时的样式*/	border:3px #F00  solid;}.out {/*移除时的样式*/	border: #F00 0px solid;}    
          				var x = document.getElementsByTagName("img");		for (var i=0;i   

自己改一下吧。样式可以直接改.在chrome,firefox里面没问题.

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

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

.thumbnail span{
position: absolute;
……
我试了一下，可以是可以，但是我在绑定里面在加上一些比如说名称，价格之类的，
CellSpacing="9">


" id="oimg" alt="" width="100px" height="100px" style="border:0" />
" border="0" width="212px" height="212px">

' Font-Bold="true" Font-Size="14px" ForeColor="#0063DC">

￥' Font-Size="12px" Font-Bold="true" ForeColor="#FF6600">

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

 .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">                   
				   				   
标题
				   
价格
				   
访问量

      
查看更多关于鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did103546