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> 

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

我很期待听到你的想法，如果这是不可能的方式，我已经摆脱了没有问题。

Here is a link!

Answer 1

转换以这种方式工作：

1. 你有状态的元素（例如李）。
2. 你改变元件状态B（例如，通过添加新的类，以利或添加：悬停到它），其改变其属性（例如背景：红色）。
3. 在新的类/状态中，您正在添加转场，并设置要动画的属性（例如背景）。

现在你可以看到流畅的动画。

在你的榜样，你有两个转变：

1. “转型：背景0.5秒线性的;” on #nav a - 它没有工作，因为在悬停时没有背景变化#nav a。
2. transition：background 0.5s linear;上#nav一个：悬停，#nav一个：活性 - 这意味着的变化背景 “#nav一个”从“无”，以“背景：＃1D2248 URL（” ../ IMG/activeTab.gif'）repeat-x;“线性动画在0.5s内的。

，我从你的代码简化的jsfiddle显示如何更改悬停动画：

http://jsfiddle.net/hzTwz/

Answer 2

这里有一个简单的小提琴，也许可以帮助你。您只需将转换和-webkit转换添加到元素，然后在悬停时更改背景颜色时，它会与可自定义的转换一起使用。

希望它有帮助。

下面的代码：

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

li:hover{ 
background: blue;} 

这里的fiddle