CSS3转换伪元素（：after，：before）不工作？ [英] CSS3 transitions on pseudo-elements (:after, :before) not working?

问题描述

我在：hover 上显示链接的 title 属性。标题属性通过： ...

之后附加到链接。

现在我想知道如何悬停和悬停时的：后伪元素的不透明度。

html

 < a class =linkhref =＃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/

任何想法为什么这不工作？

解决方案

WebKit（Chrome，Safari）不支持伪元素的转换。

• https：//错误.webkit.org / show_bug.cgi？id = 23209


• http://code.google.com/p/chromium/issues/detail?id=54699

$ b $

在WebKit中的问题 /trac.webkit.org/changeset/138632rel =nofollow>现已解决。该补丁已经登陆Chrome Carnery，所以它将从26版本支持。我不知道Safari。

I'm showing the title attribute of a link on :hover. The title attribute is appended to the link via :after… 

Now I'm wondering how I can animate the opacity of the :after pseudo-element when hovering-in and hovering-out.

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;
}

Check out the demo: http://jsfiddle.net/d2KrC/

Any ideas why this is not working? ​

解决方案

WebKit (Chrome, Safari) does not support transitions on pseudo elements.

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

It should work in Firefox.

Edit: The issue in WebKit is now resolved. The patch allready landed in Chrome Carnery, so it will be supportet from version 26 on. I don't know about Safari.

这篇关于CSS3转换伪元素（：after，：before）不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！