html css怎么鼠标放上去图标变大,纯css html 的影像集，鼠标放上去显示大图

这个东西，或许有人说花骚，或许有人说漂亮；或许有人说对搜索引擎不友好，或许有人说可以提高用户体验度。我说，存在即合理。

这是个纯 html 和

css 的图片影像集。单单说这个“影像集”大家脑海中估计没有一个清晰的画面告诉自己，到底什么是影像集。这时候就体现出图文并茂的优势了。

大家也许都见过，这，就是一个简单的影像集：

一、效果预览

确实很简单，下面共享 html 和 css 代码：

二、完整的 html 代码

/p>

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Hoverbox Image

Gallery

type="text/css" media="screen, projection" />

/>

/>

/>

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

• href="#">

  />

  class="preview"

  />

三、两个css文件代码

*{

border: 0;

margin: 0;

padding: 0;

}

.hoverbox{cursor: default;list-style: none;position:relative;width:

620px;}

.hoverbox li{border-color: #ddd #bbb #aaa

#ccc; border-style: solid;border-width:

1px;background: #eee; display: inline;float: left;margin:

3px;padding: 5px;position: relative;}

.hoverbox a .preview{display: none; width: 200px;height:

150px;}

.hoverbox a:hover .preview{display: block;position: absolute;top:

-33px;left: -45px;z-index: 1;}

.hoverbox img{background: #fff;border:solid 1px #ccc;padding:

2px;vertical-align: top;width: 100px;height: 75px;}

.hoverbox a{position: relative;}

.hoverbox a:hover{display: block;font-size: 100%;z-index: 1;}

.hoverbox a:hover .preview{top: -38px;left: -50px;}

.hoverbox li{position: static;}

第二个css文件是为了解决兼容性。细心的家伙们应该注意到了，上面完整的 html 代码中有这样一句

，就是说当浏览器是 ie7 的时候才加载这第二个css文件。

四、制作所需图片

至于这些图片嘛

 懒得上传了，一般制作的时候都有自己的图片，不太重要。确实想要的话，就到我的博客--博文配图中下载吧～