2

別のスパン内に非表示のスパンがあります。外側のスパンにマウスを合わせると、非表示のスパンがスライドして表示されるようにアニメーション化したいと思います。

<span class="outer">Things: <span class="number">5 <span class="details">[3 widgets, 2 spanners]</span></span></span>

CSS:

.outer {
    border: 1px solid grey;
    border-radius: 4px;
    padding: 7px;
    margin: 1em;
    font-family: Verdana;
}

.number {
    background-color: green;
    color: white;
    padding: 3px 7px;
    border-radius: 4px;
}

.details {
    display: none;       
}

.outer:hover .details {
    display: inline;  
}

アニメーションなしで作業した例を次に示します: http://jsfiddle.net/QSQBV/13/

非表示のスパンを 0 から幅 'auto' またはフェードインに拡張したいと思います。

- 編集 -

OK、私はjsFiddleが苦手です。それを保存するのを忘れたか何かだと思います.とにかく、古いリンクは私が求めていた効果を示しませんでした. 新しく更新されたリンクは効果を示しています。

4

1 に答える 1

1

background-color不透明度が適切に機能するには、 を指定する必要があります。

これはあなたが必要とするものですか？JSFiddle リンク : http://jsfiddle.net/QSQBV/73/

編集：要件に従ってJSFiddleを更新しました。これがあなたが必要とするものであることを願っています! divの代わりに使用しspanました

于 2012-09-28T15:53:33.353 に答える