CSS转换无法在Chrome扩展程序中运行

Question

我试图在:hover时启用“点数”一词，展开以显示Chrome扩展程序中的点数。它不起作用。
这是我的学分CSS：

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

当我将鼠标悬停在文字上时，会打开信用，但不会进行转换。

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