CSS3-Übergänge für Pseudoelemente (: after,: before) funktionieren nicht?
Ich zeige dastitle
Attribut eines Links auf:hover
. Das title-Attribut wird über an den Link angehängt:after
…
Jetzt frage ich mich, wie ich die Deckkraft der animieren kann:after
Pseudoelement beim Hover-In und Hover-Out.
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>
Schauen Sie sich die Demo an:http://jsfiddle.net/d2KrC/
Irgendwelche Ideen, warum das nicht funktioniert? Um die Umstellung zu vereinfachen, müssen Sie