Question

I have a navigation bar which i am using css to highlight on hover and when the li has class active. I would like to has a transition to fade the background in. This is what I have so far:

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>

Problem is that when i hover over a non-active tab the transition doesn’t happen but when i hover over the already active tab is transitions from the non-active style to the active style.

I look forward to hearing your ideas, if it is not possible with the way i have laid it out no problem.

Here is a link!

Answer 1

Transitions works this way:

1. You have element with state A (for example li).
2. You change elements state to B (for example by adding new class to li or adding :hover to it) which changing it’s properties (for example background: red).
3. In the new class/state you are adding transition, and set which property to animate (for example background).

And now you can see smooth animation.

In your example you have two transitions:

1. “transition: background 0.5s linear;” on #nav a — it didn’t work because there is no background change in #nav a on hover.
2. transition: background 0.5s linear; on #nav a:hover, #nav a:active — it means change background of “#nav a” from “none”, to “background: #1D2248 url(‘../img/activeTab.gif’) repeat-x;” with linear animation in 0.5s.

I made simplified jsfiddle from you code that shows how to change animations on hover:

http://jsfiddle.net/hzTwz/