リンクの上にカーソルを合わせると、タイトルがフレームの外にスライドし、別の単語がスライドインするメニューを作成しました (クライアントの要求)。これを CSS のみで実行しようとしていますが、Chrome では期待どおりに動作しますが、Firefox や Opera では動作しません。2 番目のアニメーション (別の単語がスライドインする場所) のみが機能しますが、プライマリ アニメーション (通常の単語がスライドアウトする場所) にはトランジションが適用されません。例を含む jsFiddle を次に示します。
必要に応じて jQuery を使用することもできます (コードはあり、IE9 には既に必要です) が、可能であれば、これを CSS のみで機能させたいと考えています。セレクターをより具体的にしようと考えましたが (子セレクターのようなものを使用a.MenuLink > li.MenuItem > span.MenuTitle
)、コミュニティがこれについて助けてくれることを望んでいました。