CSS Transition работает только с некоторыми элементами - PullRequest
Новая
       5

CSS Transition работает только с некоторыми элементами

0 голосов
/ 11 января 2012

У меня есть меню, в котором каждый якорь должен делать простой переход цвета при наведении курсора.Дело в том, что в Chrome v16.0.912.75 это делает только один из якорных элементов (в данном случае только ссылка 'twitter'), и ни один из элементов не переходит в IE9 (Firefox 8.0.1 работает нормально).Я изменил порядок ссылок и удалил класс 'last' из ссылки 'twitter' безрезультатно.

Ничего особенного в этом нет, поэтому я не уверен, почему он не работает.

#menu_left a{
    display:block;
    width:100px;
    height:30px;
    margin:10px auto;
    font:18px bold;
    text-decoration:none;
    border-bottom:1px dotted #e69b8d;
    -webkit-transition: 0.25s ease-in;
    -moz-transition: 0.25s ease-in;
    transition: 0.25s ease-in;
    }
#menu_left a.last{border-bottom:none;}
#menu_left a:hover{
    color:#ed9887;
    transition: 0.25s ease-out;
    -webkit-transition: 0.25s ease-out;
    -moz-transition: 0.25s ease-out;
    }    

<div id="menu_left">
    <a href="/">home</a>
    <a href="/gallery/">gallery</a>
    <a href="/contact/">contact us</a>
    <a href="http://www.facebook.com">facebook</a>
    <a href="http://www.twitter.com" class="last">twitter</a>
</div>

Вы можете увидеть работу на http://events.bridalflowersexclusive.com. Заранее спасибо за ваше время.

Ответы [ 2 ]

1 голос
/ 11 января 2012

IE9 не поддерживает переходы CSS, в Webkit есть ошибка, предотвращающая анимацию посещенных ссылок.

0 голосов
/ 11 января 2012

Проверьте поддержку браузера по этой ссылке.Возможно, вы хотите найти решение для JavaScript / Framework?

http://www.w3schools.com/css3/css3_transitions.asp

...