CSS3 переходы на псевдо-элементах (: after,: before) не работают?

Я вижу title атрибут ссылки на :hover. Атрибут title добавляется к ссылке через :after...

теперь мне интересно, как я могу оживить непрозрачность :after псевдо-элемент при наведении и наведении.

HTML-код

<a class="link" href="#" title="something"></a>​

в CSS

.link {
    display:block;
    width:50px;
    height:50px;
    background:red;
}

.link:after {
    position:relative; 
    content: attr(title); 
    top:55px; 
    color:$blue; 
    zoom: 1; 
    filter: alpha(opacity=00); 
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
}

.link:hover:after { 
    zoom: 1; 
    filter: alpha(opacity=100); 
    opacity: 1;
}

Проверьте демо:http://jsfiddle.net/d2KrC/

любые идеи, почему это не работает? ​

13
css css-transitions css3 pseudo-element

2 ответов

WebKit (Chrome, Safari) не поддерживает переходы на псевдоэлементах.

Он должен работать в Firefox.

Edit: проблема в WebKit сейчас решается. Патч уже приземлился в Chrome Carnery,поэтому он будет поддерживаться с версии 26. Я не знаю насчет сафари.

10

существует довольно простой обходной путь к этой ошибке webkit, чтобы сделать переходы работать на псевдо-классах. Вот отличный пост в блоге об этом: http://xiel.de/webkit-fix-css-transitions-on-pseudo-elements/

в основном webkit не поддерживает переходы напрямую, но вы можете применить переход и стиль, который хотите изменить, к своему родительскому элементу. Затем в псевдо-класс вы помещаете те же свойства стиля, на которые хотите повлиять, но даете им значение: inherit. Это заставит их наследовать все значения родительских элементов, включая переход.

вот пример, который я сделал, чтобы оживить: after element, up and down

a { 
    position: static; /* explicitly defined so not to forget that it can't be relative or :after transition hack will not work */
    top: 1px; /*doesnt move it because it is position static */
    -webkit-transition: top 200ms ease 0;
}
a:after {
    content: '';
    position: absolute;
    top: inherit;
}
a:hover {
    top: 3px;
}

*обновление Ошибка была исправлена в Chrome Canary (по состоянию на февраль), но по-прежнему кажется сломанной в Safari. Можете проверить статус и оставаться в курсе здесь: https://code.google.com/p/chromium/issues/detail?id=54699

5