CSS3 -переход- - PullRequest
Новая
       13

CSS3 -переход-

0 голосов
/ 09 марта 2012

У меня есть панель навигации, которую я использую 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>

Проблемазаключается в том, что при наведении на неактивную вкладку переход не происходит, но при наведении на уже активную вкладку происходит переход из неактивного стиля в активный.

Я с нетерпением жду ответаВаши идеи, если это невозможно с тем, как я их изложил, не проблема.

Вот ссылка!

Ответы [ 2 ]

1 голос
/ 09 марта 2012

Переходы работают следующим образом:

  1. У вас есть элемент с состоянием A (например, li ).
  2. Вы меняете состояние элемента на B (например,добавив новый класс к li или добавив : hover к нему), который изменит его свойства (например, background: red ).
  3. Inновый класс / состояние, к которому вы добавляете переход, и установите, какое свойство анимировать (например, background ).

И теперь вы можете видеть плавную анимацию.

В вашем примере у вас есть два перехода:

  1. "переход: фон 0.5s линейный; " on # nav a - это не сработало, поскольку в # nav a при наведении курсора нет изменений фона.
  2. переход: фон 0.5s linear; on # nav a: hover, #nav a: active - это означает изменение фона "# nav a" с "none", to " фон: # 1D2248 url ('../ img / activeTab.gif') repeat-x; " с линейной анимацией за 0,5 с.

Я сделал упрощенный jsfiddle из вашего кода, который показывает, как менять анимацию при наведении:

http://jsfiddle.net/hzTwz/

0 голосов
/ 20 января 2014

Здесь у вас есть упрощенная скрипка, которая может вам помочь.Вам нужно только добавить 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;}

Вот скрипка

...