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

回复讨论(解决方案)

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:20 PM

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

                CellSpacing="9">


                    鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose " id="oimg" alt="" width="100px" height="100px" style="max-width:90%" />
                   " border="0" width="212px" height="212px">
测试测试测试



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

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


                    鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose " id="oimg" alt="" width="100px" height="100px" style="max-width:90%" />
                   " 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

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

回复讨论(解决方案)

                CellSpacing="9">


                    鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose " id="oimg" alt="" width="100px" height="100px" style="max-width:90%" />
                   " border="0" width="212px" height="212px">

测试测试测试

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">img {		border:0;		}.over { /*鼠标放入时的样式*/	border:3px #F00  solid;}.out {/*移除时的样式*/	border: #F00 0px solid;}</style></head><body><img  src="/static/imghw/default1.png"  data-src="1.png"  class="lazy"   id="ImgOut"   style="max-width:90%" / alt="鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" ><br /><hr /><img  src="/static/imghw/default1.png"  data-src="01.png"  class="lazy"   id="a1"  / alt="鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" ><!--把你的图片路径放上--> <img  src="/static/imghw/default1.png"  data-src="02.png"  class="lazy"   id="a2"   / alt="鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" >  <img  src="/static/imghw/default1.png"  data-src="03.png"  class="lazy"   id="a3" / alt="鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" ></body><script type="text/javascript">				var x = document.getElementsByTagName("img");		for (var i=0;i<x.length;i++){		x[i].onmouseover = function (){ //鼠标移入时的样式.			this.className="over";	//设置样式			var x = this.id[1]+".png";//拼接图片地址			if(this.id!="ImgOut"){//当前id为大图,就忽略.				var y = document.getElementById("ImgOut");//获取显示图片的地址				y.setAttribute("src",x);//设置图片地址.			}		}				x[i].onmouseout = function (){ //鼠标移出时的样式			this.className="out";	//设置样式		}						}				</script></html>

登录后复制

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

变成

标题

价格

访问量

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

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7328

Java教程

1626

CakePHP 教程

1350

Laravel 教程

1262

PHP教程

1209

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，