步骤7
----------
添加:hover状态
随着所有的缩略图都到了他们围绕显示区域的正确位置,我们可以继续定义这些缩略图的:hover样式。因为这些图片实际上并不是真正意义上的缩略图而只是缩小大小的图片,我们能够放大他们到160 x 120px并重定位他们到显示区域的中心,并在他们的原始位置保留一个空格。然而,如果我们这么作,我们会失去我们的mouseover link,并且这个被选择的图片会在原始位置与新位置之间来回闪烁。
为了留住我们的mouseover link,我们必须扩展这个链接的大小到这个<ul>的宽与高。
我们能够通过增加link周围的padding来让高变成实际上的336px高,而宽成为448px。
另外,这个被选择的链接应该要落到其他超链接背后,因为它不能其他链接,并阻止其他链接被选择。所以我们必须设置被选择的超链接的z-index小于100。
在开始下一个单元之前,这个部分的内容应该被完全吸收。
/* Resizing the link on hover */ #gallery a:hover { width:160px; height:120px; padding:108px 144px; position:absolute; left:0; top:0; z-index:20; }
width:160px; 让这个超链接的宽度更大,能容纳下一半原始大小的图片height:120px; 让这个超链接的高度更大,能容纳下一半原始大小的图片padding:108px 144px; 添加padding,来使得超链接的尺寸达到448 x 336pxposition:absolute; 允许我们绝对定位我们的超链接left:0; 移动超链接到<ul>的左边top:0; 移动超链接到<ul>的上边z-index:20; 让这个超链接在其他超链接底下(一个更低的层)
步骤7a示例:
运行代码框 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
这个示例显示:你能够将鼠标移动到任何一个缩略图上,并让它跳到显示区域中并保持hover在这个超链接上。而且它还显示,当你移动鼠标到其他图片上时,其他图片也会跳到显示区域去。
我们现在设置缩略图的:hover状态,让他放大到160 x 120px,改变大小的时候我去掉了图片的框。
/* Resizing the thumbnail on hover */ #gallery a:hover img { background:#eee; position:relative; width:160px; height:120px; border:0; z-index:20; }
background:#eee; 让IE触发:hover样式position:relative; 为了定义z-index样式width:160px; 设置图片宽度=160pxheight:120px; 设置图片高度=120pxborder:0; 移除缩略图的1px框z-index:20; 让这个图片移动到和:hover超链接一样的层。
步骤7b示例:
运行代码框 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
现在这个hover图片被放大到原始大小的一半,并被定位于显示区域的中心部分。
出处:蓝色理想
责任编辑:moby
上一页 XHTML+CSS创建“两步式”的相册 [6] 下一页 XHTML+CSS创建“两步式”的相册 [8]
◎进入论坛网络编程 版块参加讨论