CSS3轉換不能正常工作

所以我有完全相同的CSS3過渡到地方，只是不同的標記。CSS3轉換不能正常工作

一個被包裹在一個錨定標記的利僅使用一個圖像，一個是使用具有其它包裝的圖和一個內部figcaption一個錨定標記的李標籤..

這裏是標記。

<ul class="teamProfiles"> 
    <li> 
     <a href="#" title="Owner"><figure><img src="assets/images/players/playerKris.png" /><figcaption>Kris R</figcaption></figure></a> 
    </li> 
    <li> 
     <a href="#" title="Owner"><figure><img src="assets/images/players/playerKris2.jpg" /><figcaption>Kris R</figcaption></figure></a> 
    </li> 
    <li> 
     <a href="#" title="Designer & Code Ninja"><figure><img src="assets/images/players/playerJake.jpg" /><figcaption>Jake C</figcaption></figure></a> 
    </li> 
    <li> 
     <a href="#" title="Writer"><figure><img src="assets/images/players/playerBacon.jpg" /><figcaption>Steven B</figcaption></figure></a> 
    </li> 
    <li> 
     <a href="#" title="Laywer"><figure><img src="assets/images/players/playerJon.jpg" /><figcaption>John A</figcaption></figure></a> 
    </li> 
    <li> 
     <a href="#" title="Accountant"><figure><img src="assets/images/players/playerAmy.jpg" /><figcaption>Amy A</figcaption></figure></a> 
    </li> 
    <li> 
     <a href="#" title="We're Hiring"><figure><img src="assets/images/players/playerDarth.jpg" /><figcaption>You</figcaption></figure></a> 
    </li> 
</ul>

這裏上面顯示爲標記的CSS ..

.teamProfiles { 
    width: 920px; 
} 
.teamProfiles > li { 
    float: left; 
    width: 65px; 
    height: 85px; 
    border: 3px solid #fff; 
    box-shadow: 0 0 4px rgba(0, 0, 0, .3); 
    margin-left: 3%; 
    display: inline-block; 
} 
.teamProfiles > li:first-child { 
    margin-left: 0; 
} 
.teamProfiles > li:last-child { 
    margin-right: 3%; 
} 
.teamProfiles figcaption { 
    padding-top: 4px; 
} 
.teamProfiles > li > a > figure { 
    width: 65px; 
    height: 65px; 
} 
.teamProfiles > li > a { 
    display: block; 
    height: 85px; 
    width: 65px; 
    text-decoration: none; 
    text-align: center; 
    font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 600; 
    font-size: .8em; 
    font-smooth: always; 
    -webkit-font-smoothing: antialiased; 
    color: #333; 
    position: relative; 
    overflow: hidden; 
} 
.teamProfiles > li > a::after { 
    content: attr(title); 
    background: rgba(0, 0, 0, .5); 
    display: inline-block; 
    position: absolute; 
    width: 65px; 
    height: 40px; 
    padding-top: 25px; 
    top: -20px; 
    left: 0; 
    color: #9ecd41; 
    -webkit-transition: all .5s ease-in-out .6s; 
} 
.teamProfiles > li > a:hover::after { 
    top: 0; 
}

我思念到底有什麼？其驅使我瘋狂不能弄清楚..

是的，我知道它只有-webkit轉換屬性。這就是因爲我在Chrome工作中弄明白了..我擁有了它們，並且在每個瀏覽器中嘗試過，並且沒有任何工作。所以我剛剛離開了這個，並首先在Chrome中找到了它。

試圖發現我的愚蠢的任何幫助將是真棒！ :)

來源

2012-03-15 Jake Chapman

我不確定，但我不知道是否有可能在僞元素上使用轉換。這可能嗎？ – daGUY 2012-03-15 19:42:17

不正確，這是我如何實現對我的標記的不同部分的影響...使用::後，給它一些內容：「」;然後確定它的樣式，然後添加轉換。 – 2012-03-19 22:38:53

您是否嘗試刪除::後爲：懸停僞？

來源

2012-03-17 22:31:16 Yokocapolo

CSS3轉換不能正常工作

回答

相關問題