仿6room网站图片链接效果(二)

核心提示： .blueidea a:hover span {height: 88px;width: 128px;position: absolute;left: 0px;top: 0px;border:1px solid #F90;padding: 10px 2px 2px 2px;/*让说明文字不要

.blueidea a:hover span {
height: 88px;
width: 128px;
position: absolute;
left: 0px;
top: 0px;
border:1px solid #F90;
padding: 10px 2px 2px 2px;/*让说明文字不要太靠上边界*/
background:#FFF url(http://www.hsptc.com/cssImg/blueidea.gif) no-repeat 5px 10px;/*LOGO图片定位*/
text-indent: 28px;/*文本缩进28px,避免与背景LOGO叠加*/
filter:alpha(opacity=90);/*CSS透明度滤镜*/
opacity:0.9;/*针对Mozilla浏览器CSS透明度滤镜*/
display: block;
text-decoration: none;/*去除说明文字链接下划线*/
cursor:pointer; /*让光标显示手形*/
margin:0px;/*重定位文字说明层回到正常位置*/
}

4．隐藏说明图层，这里用到margin无限大负值来把元素移出可视区域，我们把这一步放在后面做，不然一开始把它移出去了，你怎么在做的过程中看文字说明层是否与下一层吻合好，是吧。这里用到样式：

.blueidea a span {
margin-top:-9000px;/*初始化对象不可见,这里不用display: none,因为display: none对搜索引擎不友好*/
margin-left:-9000px;
position: absolute;
}

5．定位“+”图形，这里我们要注意一点是，不要把它也安排在<a></a>内，因为测试表明它是可以独立响应的，不是与文字说明层一起响应的。这里我用到背景的变换效果，但是这个效果只能在像FF这样的标准浏览器中生效，这是因为IE7以下版本A状态伪类bug缘故，当然IE7是支持的了，IE现在已逐渐向标准靠拢了，这可是标准网页设计者的福音。这里用到样式：