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

核心提示： .blueidea em { position:absolute; left:5px; bottom:5px;width:25px;height:25px; cursor:pointer;background:url(http://www.hsptc.com/cssImg/blueidea

.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了，那么在样式控制时又会出现样式的继承作用，从而导致效果变乱，如果你能有更好的实现方法一定要记得写出来与大家分享哦。

源码下载：demo.rar

此实例效果一定会用到层的叠加和相对、绝对定位，而且要应用CSS透明度滤镜，这是应该首先会想到的。它的原理是让两个层完美吻合的叠加，一个层默认时隐藏掉，用鼠标事件触发显示，另外左下角的“+”图形默认情况没有隐藏掉，要把它独立出来处理。

1．默认情况下，如果里面的大图片没有下载完，会有一块灰色的色块，图形下载完了，在图片四周会有灰色的边界，所以在这里组织一个有3px填充的大盒子，内容区块大小与图片大小相等，加上灰色的背景，设置其定位方式为相对定位，等一下其内部元素就可以以它为参考进行绝对定位，所以用到下面样式：