CSS3 -transition-

Question

我有一个导航栏，我正在使用css在悬停时以及当li激活类时高亮显示它。我想有一个过渡来淡出背景。这是我到目前为止所拥有的：

CSS：

#nav {height:32px; border-top: 1px solid #fff; border-right: 1px solid #FFFFFF; background: #141941 url('../img/topTierBG.gif') repeat-x; }
#nav ul {padding: 0px; list-style: none; height:32px; width:100%;  }
#nav li { position:relative; float: left; margin:0; border-left:1px solid #fff; line-height:30px; background: #141941 url('../img/topTierBG.gif') repeat-x; padding-top:0px;}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {width:156px; display:block; text-align:center; font-size:12px; text-decoration:none; color:#fff; margin: 0px 0px 0px 0px; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; }
#nav .active {text-align:center; text-decoration:none; padding:0; color:#fff; height:32px; background: #1D2248 url('../img/activeTab.gif') repeat-x; }
#nav a:hover, #nav a:active{background: #1D2248 url('../img/activeTab.gif') repeat-x; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; }

html:

<div id="nav"><ul id="xmp-nav">
<li class="active"><a href="/" style="width:196px;">HOME</a></li>
<li><a href="login.php" style="width:195px;">STAFF LOGIN</a></li>
<li><a href="resources.php" style="width:195px;">RESOURCES</a></li>
<li><a href="information.php" style="width:195px;">PARENT INFORMATION</a></li>
<li><a href="links.php" class="last" style="width:195px;">LINKS</a></li>
</ul></div>

问题是，当我将鼠标悬停在非活动选项卡上时，不会发生转换，但当我将光标悬停在已经活动的选项卡上时是从非活动样式转换到活动样式。

我期待着听到你的想法，如果这不可能的话，以我的方式，没有问题。

这里有一个链接！

Answer 1

转换是这样工作的：

1. 您有一个状态为A的元素（例如li）
2. 您将元素状态更改为B（例如，通过向li添加新类或向其添加:hover），从而更改其属性（例如，background:red
3. 在新的类/状态中，您将添加过渡，并设置要设置动画的属性（例如背景）

现在您可以看到平滑的动画。

在您的示例中，您有两个转换：

1. "过渡：背景0.5秒线性；"在#nav a上——它不起作用，因为悬停时#nav a中没有背景变化
2. 过渡：背景0.5s线性在#nav a:悬停，#nav a：活动上--这意味着将"#nav a"的背景从"none"更改为"background:#1D2248 url（'../img/activeTab.gif'）repeat-x；"0.5秒内线性动画

我从你那里制作了简化的jsfiddle代码，展示了如何在悬停时更改动画：

http://jsfiddle.net/hzTwz/

Answer 2

这里有一个简化的小提琴，可能会对您有所帮助。您只需要将transition和-webkit transition添加到元素中，然后当您在悬停时更改背景颜色时，它将与您可以自定义的transition一起工作。

希望能有所帮助。

这是代码：

li{
float: left;
padding: 10px 15px 10px 15px;
background: red;
cursor: pointer;
transition: background 1s;
-webkit-transition: background 1s;}
li:hover{
background: blue;}

这是小提琴