hoverbox
日期：2008-12-15 分类：CSS
前两天在的 Nathan Smith 的博客上看到他的 hoverbox ，觉得非常的精彩。这是一个图片集，当鼠标移动到每张小图片上，就会有一张大图片出现。他的制作原理是：在标签 a 里放两张一样的图片，第一张图片设置成较小的尺寸，第二张先隐藏，当鼠标移动到第一张图片上时，就让第二张图片显示。原文地址和例子地址如下：
原文地址：http://sonspring.com/journal/hoverbox-image-gallery
例子地址：http://host.sonspring.com/hoverbox/
效果预览：
从上面的例子可以看到，为了兼容 IE6 ，用了两张样式表。我在想：能不能只用一张样式表？我把他的两张样式表合在一起后，在 IE6 、IE7 、FF 、opear 中浏览没有任何问题，然而在 Chrome 中去没有效果了。我就在想：能不能修改修改，只用一张样式表，并且能在上述所有浏览器中实现效果。经过多次修改实验后，终于实现了。我给第二张图片套了一个 span 标签，CSS 代码也做了一定的修改。详细例子请点击这里查看。
原先我一直都认为 CSS 没有逻辑性，所以不会有太大的灵活性或可变性（不知道用词是否恰当），但现在却越来越觉得：CSS 虽然是死的，但人是活的。活生生的人有各种各样不一样的想法。就如的这个例子，要制作这种效果，我们一般会想到 javascript ，但他却突破常规，完全只用 CSS 。
=======华丽的分割线=========================================
读者“老鼠”提出上面修改的例子不兼容 IE8 beta 2 ，所以特意装上了 IETester 进行查看，看到确实不行。在 IE8 beta 2 里的效果是：鼠标第一次移动到小图片上的时候，效果正常，大图片出现在了指定的位置。然而第一次之后，大图却跑到浏览器左上角去了，似乎第一次之后，大图的绝对定位是以浏览器窗口为基准。经过检查之后，发现是 .img1{display:block} 导致的，原本此属性是为了修复 img 3px bug 的，没想到却导致在 IE8 beta 2 里出现异常（不知道这算不算 IE8 的 bug），让人不能理解。既然这条属性有问题，那就换一种解决办法，改成 .img1{vertical-align:top} ,次属性也能修复 img 3px bug ,并且使例子在 IE8 beta 2 里正常。修复后的例子请点击这里查看。
再次感谢“老鼠”的测试！（2008.12.18）
ul{margin:20px auto 0;} 这种写法我还第一次见呢，方便了不少。
li{display:inline; margin:0 5px 5px 0;} li不是默认inline吗？
这里的margin居然没有简便的方式，哈哈。
vertical-align:top 啥意思？以前没看过……
哎，好多不懂，这个效果也做不来。
li 默认是 block ，不是 inline ，此处加上是为了修复 IE6 双倍 margin 问题；
margin:0 5px 5px 0 是简写；
vertical-align:top 已经说了是修复 img 3px bug ，更多介绍你可以查看：
http://www.17css.com/ie-img-3px-bug.html
呵呵，算不上测试，只是看看效果嘛。
其实我就是比较喜欢用新的东西，从beta1到beta2做了不少改进，beta2里，加了个兼容性视图，点了这个按钮以后，在你的第一个版本里也能看到正确的效果。
很遗憾，上面的修改版不支持IE8 beta2
是吗？因为我机子上没有 IE8 。
已经修复了在 IE8 beta 2 中的不正常。