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

14

Я показываюtitle атрибут ссылки на:hover, Атрибут title добавляется к ссылке через:after& # X2026; & # xA0;

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

html

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

css

<code>.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;
}
</code>

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

Есть идеи, почему это не работает?     & # X200B;

:before а также:after являются псевдоэлементами,:hover это псевдокласс Это две разные концепции, которые не следует путать друг с другом. BoltClock♦
Нет необходимости для -ms-перехода. Это свойство никогда не существовало. ReactingToAngularVues
Это задокументированная ошибка в webkit. Проверьте мой ответ ниже для взлома, чтобы исправить, а также отчет об ошибке, чтобы оставаться в курсе его статуса DMTintner

Ваш Ответ

2   ответа
10

https://bugs.webkit.org/show_bug.cgi?id=23209 http://code.google.com/p/chromium/issues/detail?id=54699

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

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

Прошло 2 года. Я не задержал бы дыхание.
Спасибо. Надеюсь, они исправят это как можно скорее. matt
Анимация не работает на iphone / ipad IOS 8, есть идеи?
5

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

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

Вот пример, который я сделал для анимации: после элемента, вверх и вниз

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

Похожие вопросы