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

核心提示： 4．隐藏说明图层，这里用到margin无限大负值来把元素移出可视区域，仿6room网站图片链接效果(二)(5)，我们把这一步放在后面做，不然一开始把它移出去了，那么在样式控制时又会出现样式的继承作用，从而导致效果变乱，你怎么在做的过程中看文字说明层是否与下一层吻合好，是吧

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现在已逐渐向标准靠拢了，这可是标准网页设计者的福音。这里用到样式：

.blueidea em {
position:absolute;
left:5px;
bottom:5px;
width:25px;
height:25px;
cursor:pointer;
background:url(http://www.hsptc.com/cssImg/blueidea1.gif) no-repeat;
}
.blueidea em:hover {
background-image:url(http://www.hsptc.com/cssImg/blueidea2.gif) ;/*"+"图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/
}

6．解决IE7以下版本A状态伪类bug，加入一条如下样式：

.blueidea a:hover {
background-color: #FFF;/*IE7以下版本A状态伪类bug*/
}

四、不足

此实例的不足是图片左下角的“+”图形变换效果在IE7以下版本浏览器中失效，本人还没有想到较好的解决办法，因为我的要求是：只能纯CSS实现，尽量少用样式代码，同时保证做出来的实例不随它在网页中出现位置的变化而改变，这样“+”元素一定会用到绝对定位，同时其父级采用相对定位，而且要让这种背景变换效果在IE7以下版本生效，只能用A标签，现在问题是父元素内已出现一次A了，那么在样式控制时又会出现样式的继承作用，从而导致效果变乱，如果你能有更好的实现方法一定要记得写出来与大家分享哦。