CSS3 전환이 제대로 작동하지 않습니다.

Question

다른 마크 업을 사용하여 동일한 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; 
} 

내가 놓친 거지 도대체

! 그게 나를 미치게 만들 수없는 미치게 ..

그리고 네, 그 유일한 - 웹킷 - 전환 속성을 알고 있어요. 그게 내가 알아낼 크롬에서 일하고있어 원인 ... 나는 그들 모두를 가지고 모든 브라우저에서 시도하고 아무것도 효과가 없습니다. 그래서 저는 방금이 책을 남겨두고 Chrome에서 먼저 알아낼 것입니다.

내 어리 석음을 발견하는 데 도움이되는 어떤 도움도 끝내 줄 것입니다! :)

Answer 1

당신은 : 호버 의사를 위해 :: after를 제거해 보셨습니까?