注意:我通过Firebug构建和测试了我的解决方案,以使其在您提供的链接上正常工作。如果按顺序执行这些步骤,您应该可以完全运行它。
除了支持RGBA背景颜色的Safari和Firefox 3.5等其他浏览器之外,您将无法从transparent
动画到颜色。如果您正在寻找跨浏览器支持,则可以像这样解决问题:
1. 将默认的悬停效果限定在非JS类中,以便:hover
效果可以作为后备方案。一个很好的方法是:
<html class="no-js">
<head>
.... meta, title, link tags ...
<script type="text/javascript">document.documentElement.className = "js";</script>
.... other scripts ...
</head>
这会在页面显示之前将 no-js
更改为 js
。
2. 使用 jQuery 在您的 a
标签旁添加虚拟元素(js
添加虚拟元素的步骤在第3步)
以下是要使用的 CSS:
.js .iconrow { background: none !important }
.iconfader {
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color: #ccc;
z-index: 5;
}
.iconrow { position: relative }
.iconrow a { position: relative; z-index: 10}
3. 当鼠标移入和移出时,淡入淡出新的虚拟元素
$('.iconrow').each(function(){
var $span = $("<span class='iconfader'></span>").css('opacity',0.0).appendTo(this);
$(this).hover(function(){
$span.stop().animate({opacity: 0.8}, 200);
}, function(){
$span.stop().animate({opacity: 0.0}, 200);
});
});
最后,如果您决定使用图像背景而不是纯色,请小心。IE7和IE8无法更改24位PNG文件的不透明度。这会完全破坏透明度。