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