伪元素上的 CSS3 转换 ( :after, :before) not working?

Question

我在 :hover 上显示链接的 title 属性。 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/

知道为什么这不起作用吗？

Answer 1

WebKit(Chrome、Safari)不支持伪元素的过渡。

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

它应该在 Firefox 中工作。

编辑: WebKit 中的问题 is now resolved .该补丁已经登陆Chrome Carnery，因此从26版本开始支持。我不知道 Safari。