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在僞元素（：之後，：之前）不工作？

回答

相關問題