CSS3在伪元素（：之后，：之前）不工作？

我在:hover上显示链接的title属性。 title属性通过:after附加的链接...CSS3在伪元素（：之后，：之前）不工作？

现在我想知道徘徊，在徘徊，出来的时候，我可以怎样动画: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/

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

来源

2012-05-14 matt

'：before'和'：after'是伪元素，'：hover'是一个伪类。这是两个截然不同的概念，不要混淆在一起。 – BoltClock

这是webkit中记录的错误。看看我的答案下面的黑客修复，以及错误报告，以保持其状态更新 – DMTintner

无需-ms转换。该财产从未存在过。 – ReactingToAngularVues

WebKit（Chrome，Safari）不支持在伪元素上进行转换。

它应该工作在Firefox。

编辑：这个问题在WebKit is now resolved。该补丁已经在Chrome Carnery中登陆，因此它将成为26版本的补丁。我不知道Safari。

来源

2012-05-14 06:58:03 Jona

好的，谢谢。希望他们尽快解决这个问题。 – matt

已经2年了。我不会屏住呼吸。 – chovy

动画似乎不适用于iPhone/iPad IOS 8，有什么想法？ – webkit

Theres是一个相当简单的解决方法来解决这个webkit的错误，使转换工作在伪类上。这里有一篇很棒的博客文章：http://xiel.de/webkit-fix-css-transitions-on-pseudo-elements/

基本上webkit并不直接支持转换，但是你可以应用你想要改变其父元素的转换和样式。然后在伪类中放入您想要影响的相同样式属性，但给它们赋值：inherit。这将导致它们继承包括转换在内的所有父元素值。

下面是一个示例我做动画的：后元素，上下

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

*更新该bug已被固定在Chrome Canary版（截至2月），但仍出现在被打破苹果浏览器。可以检查状态并在此处保持更新： https://code.google.com/p/chromium/issues/detail?id=54699

来源

2012-12-16 20:51:52 DMTintner

CSS3在伪元素（：之后，：之前）不工作？

回答

相关问题