0

「クレジット」という単語を作成しようとしています。: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;
}

テキストにカーソルを合わせると、クレジットが開きますが、トランジションはありません。

4

1 に答える 1

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;
}
于 2013-04-12T01:01:41.060 に答える