实例分析：仿6room网站图片链接效果(3)

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

源码下载：点击这里下载源文件

关键词：

【推荐给好友】【关闭】

最新五条评论

查看全部评论

评论总数 0 条

您的评论

用户名： （新注册） 密　码： 匿名：

·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有