Chrome 확장 프로그램에서 CSS 전환이 작동하지 않습니다.

Question

:hover에 에드온하면 '확장'이라는 단어를 사용하여 Chrome 확장 프로그램의 크레딧을 표시합니다. 작동하지 않습니다.

.credits{ 
float: right; 
text-align: right; 
cursor: default; 
} 

.hiddencredits{ 
display: none; 
width: 1px; 
height: 1px; 
-webkit-transition: width 2s, height 2s; 
text-align: center; 
cursor: default; 
} 

.credits:hover .hiddencredits{ 
display: block; 
width: 100px; 
height: 100px; 
background: black; 
color: white; 
} 

내가 텍스트 위로 마우스를 가져가 아니라 전환과 함께, 크레딧 열립니다
다음은 학점에 대한 내 CSS입니다.

Answer 1

display 속성 대신 visibility 또는 opacity 속성을 사용하십시오.

http://jsfiddle.net/chKNw/1/

.credits { 
    float: right; 
    text-align: right; 
    cursor: default; 
} 
.hiddencredits { 
    visibility: hidden; 
    width: 0; 
    height: 0; 
    -webkit-transition:width 2s, height 2s; 
    text-align: center; 
    cursor: default; 
} 
.credits:hover .hiddencredits { 
    visibility: visible; 
    width: 100px; 
    height: 100px; 
    background: black; 
    color: white; 
} 

그것은 작동