本例对于完全支持:hover伪类的浏览器来说,只需要CSS即可,但是同以前做的一些效果一样,还是需要JS来应付史前怪兽IE 6。
关于这个js文件,请参阅:《JS解决IE 6不支持:hover伪类的简单方法》
首先看效果图:
HTML如下:
下面介绍几个要点:
1. 图片横排
1) 将li左浮动(float:left),可以使图片横排。
2) 利用li的负右边距(margin-right的负值),使后面的向左移动叠加在前面的li之上,如图3所示。
当鼠标指向图片时(li:hover),设定li的右边距为0,则将后面的图片挤向右边。
2. 边框
由图1可知,图片有1px的白色边框,但是需要注意的是,左右相邻的2个图片之间的边框只有1px,右边框是后面图片的左边框。因此实现的思路是:上/下/右边框用ul的边框来实现,而左边框由图片的边框实现。
3. 尺寸的计算
负边距的计算如图4所示。
图4 负边距值的计算
此处最容易糊涂的地方是边框与宽度。
图片包括边框,如果设计的宽度为250px,那么图片的实际宽度应为248px(250px-2px)。(高度同理)
由于ul有1px的右边框,因此ul的CSS设定宽度为设计宽度-1px,本例中为599px(600px-1px)。
关于边框和宽度的关系请参见:《盒模型(BOX Model)》
4. IE内的问题
在IE内,虽然对ul设定了overflow:hidden,但是会出现如图5所示的情况。因此,需要对ul设定position:absolute,以使其能正确隐藏溢出的内容。
5. h5的显示与隐藏
h5内是图片的简要说明,默认状态不显示,当鼠标指向图片的时候会显示出来,如图2所示。
h5是叠加在图片上的,因此使用绝对定位来控制其位置,同时,为了使其相对于li绝对定位,因此给li设定相对定位以产生包含块。