0

<a>リスト内のタグにトランジション効果を作成しようとしています。これにより、ネストされたリストが表示されます。<a>これは問題ありませんが、0.5 秒続くのトランジション エフェクトと一致させたい点を除きます。遷移遅延を試してみても、常にすぐに遷移するようです。基本的に、ネストされたリストが表示されるまでに 0.5 秒の遅延が必要です。

また、ユーザーがネストされたリストの項目にカーソルを合わせたときに、<a>要素がそのホバー状態を維持するようにしたいです。これは可能ですか？

純粋な CSS で可能な限り多くのことを試みたかったのです。

誰でも私にガイダンスを与えることができますか？十分に説明できたと思います。

JS フィドルはこちら: http://jsfiddle.net/WKfuW/1/

奇妙な文字を許してください - 私はアイコンに @font-face を使用しています。

4

1 に答える 1

4

http://jsfiddle.net/WKfuW/2/

表示を遷移させるのではなく、不透明度を遷移させることで目的を達成できました。表示はトグルです。オンまたはオフです。しかし、不透明度は 0 から 1 までの範囲です。代わりにそれを使用することで、遅延させたり、フェードさせたり、逆に同じことを行うことができました。

便利な CSS は次のとおりです。

.option-list ul li ul
{
    display: block;
    opacity: 0;

    transition:opacity 0.5s ease 0.5s;
}

.option-list ul li:hover ul {
    opacity: 1;

    transition: opacity 0.5s ease 0.5s;
}
于 2013-01-30T15:07:32.370 に答える