Question

我有以下用于导航悬停的课程，它只是在悬停时添加背景图片。

 nav a:hover, nav a:focus, nav a:active {
     background:url(../images/goldNavBG.png) repeat-x;
  }

我想添加一个简单的css3淡入效果 - 但我担心旧浏览器的回退，因为它需要支持ie7 +，是否可以满足两者 - 所以它只显示旧版本的bg和没有破坏任何东西！？

干杯

Answer 1

试试这个：

nav a{
    /* your other styles */
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}

nav a:hover, nav a:focus, nav a:active {
   background:url(../images/goldNavBG.png) repeat-x;
}

在非CSS3兼容的浏览器上，后台将被替换为无过渡。

以下是演示：http://jsfiddle.net/Vq34s/1/

背景淡入css - 旧版浏览器的后备

1 个答案: