如上图,在制作数码热销排行的页面时,每种手机的图片都是固定的160×120大小,但是出于页面美观及内容可读性的考虑,在列表页上图片都压缩为原大小的50%显示;也就是80×60像素大小。不过当用户将鼠标移动到缩略图上时,我们会按原图大小显示出来。类似的效果在抓虾上也被应用在显示用户头像上:
抓虾使用的技术是利用一个隐藏的浮动层,每张缩略图上注册mouseover事件,当鼠标移动到缩略图上时,设置浮动层中img元素的src属性为头像的图片URL,然后通过JavaScript计算绝对定位,将放大后的头像显示在缩略图上。
事实上,如果图片显示的大小已经固定的话,不需要JavaScript,只需要纯CSS就可以实现类似的效果。如在数码产品热销排行页中,CSS的定义大致如下:
代码
.DigitalImage a
{
position : relative ;
}
.DigitalImage a:hover {
position : relative ;
z-index : 1 ;
border : none ;
}
.DigitalImage a img {
position : static ;
width : 80px ;
height : 60px ;
border : none ;
}
.DigitalImage a:hover img {
position : absolute ;
z-index : 2 ;
width : 160px ;
height : 120px ;
border : 1px solid #CCC ;
left : -40px ;
top : -30px ;
}
position : relative ;
}
.DigitalImage a:hover {
position : relative ;
z-index : 1 ;
border : none ;
}
.DigitalImage a img {
position : static ;
width : 80px ;
height : 60px ;
border : none ;
}
.DigitalImage a:hover img {
position : absolute ;
z-index : 2 ;
width : 160px ;
height : 120px ;
border : 1px solid #CCC ;
left : -40px ;
top : -30px ;
}
原理很简单,设置a元素的position属性为relative,图片最开始显示为50%大小,使用默认定位;当:hover被触发的时候,图片更改为绝对定位,同时显示为原图大小,为了使效果看起来像是对称的盖在缩略图上,同时设置top和left为缩略图的宽高的一半的负数。
以上CSS中比较让人费解的大概就是粗斜显示的 border:none 一句。这看似一个毫无意义的效果,可是如果没有这一句的话,在IE6中就无法触发hover。
以前未曾遇到类似的问题,一番google,才知道这是IE6处理CSS伪类:hover的Bug。例如如下的代码:
<
style
>
a {}
a span { color : green ; }
a:hover {}
a:hover span { color : red ; }
</ style >
< a href =”http://www.taobao.com“ > 淘宝网 < span > 淘你喜欢 </ span ></ a >
a {}
a span { color : green ; }
a:hover {}
a:hover span { color : red ; }
</ style >
< a href =”http://www.taobao.com“ > 淘宝网 < span > 淘你喜欢 </ span ></ a >
a:hover
{
border
:
none
;
}
a:hover
{
padding
:
0
;
}
a:hover
{
background
:
none
;
}
此时hover就可以触发了。这样的属性还包括direction/text-align/text-indent/float/overflow /position …… 等等。我在数码产品畅销榜页面就是选择了使用border:none。更详细的信息请参考:
* IE Pure CSS Pop Ups Bug
* IE中伪类:hover的使用及BUG
另外,通过阅读 position:relative/absolute 无法冲破的等级,发现CSS还有改进的空间,改动后如下:
代码
改动的原理就是去掉了a样式定义,直接定义a:hover。这样即避免了IE6的hover的Bug(position也是一个触发显示的属性),另外也避免了 position:relative/absolute 无法冲破的等级 一文中提到的z-index的问题,所以你会发现改进后的样式中,z-index属性也去掉了。
.DigitalImage a:hover
{
position : relative ;
}
.DigitalImage a img {
position : static ;
width : 80px ;
height : 60px ;
border : none ;
}
.DigitalImage a:hover img {
position : absolute ;
width : 160px ;
height : 120px ;
border : 1px solid #CCC ;
left : -40px ;
top : -30px ;
}
position : relative ;
}
.DigitalImage a img {
position : static ;
width : 80px ;
height : 60px ;
border : none ;
}
.DigitalImage a:hover img {
position : absolute ;
width : 160px ;
height : 120px ;
border : 1px solid #CCC ;
left : -40px ;
top : -30px ;
}