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

过渡以这种方式运作：

您拥有状态A的元素（例如 li ）。
您将元素状态更改为B（例如，通过向 li 添加新类或向其添加：hover ）来更改其属性（例如背景：红色）。
在新类/州中，您要添加转场，并设置要设置动画的属性（例如背景）。

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

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

“转换：背景0.5s线性; #nav a - 它无效，因为 #nav a <没有背景更改/ strong>悬停。

过渡：背景0.5s线性; #nav a：hover，＃nav a：active - 这意味着更改“＃nav a”的背景从“无”到“背景：＃1D2248 url（'../ img / activeTab.gif'）repeat-x;”与线性动画在0.5秒。

我从你的代码中创建了简化的jsfiddle，它显示了如何在悬停时更改动画：

http://jsfiddle.net/hzTwz/

Answer 2

在这里你有一个简化的小提琴可能会帮助你。您只需要在您的元素中添加transition和-webkit-transition，然后在悬停时更改背景颜色时，它会根据您自己定制的过渡进行操作。

希望它有所帮助。

以下是代码：

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

li:hover{
background: blue;}

这是fiddle

CSS3-过渡 -

2 个答案: