-1

宿題をしていると、使用している CSS トランジション効果などを使用できないようdisplay:none;ですdisplay:inline;。

CSSドロップダウンメニューにカーソルを合わせたときにフェードインとフェードアウトを追加して、見栄えを良くしたいと考えています。私が発見したように、表示要素を使用する場合、これは不可能です。

CSS から削除しようとしdisplayましたが、これを行うと要素がそこにあり (表示されていないにもかかわらず)、マウスを合わせるとフェードインします。「pointer-events:none;」を追加する提案を読みました。これにはクロスブラウザ互換性がありません。また、マウスを再度上に置くと、フェード要素がちらつきます。

また、CSS キーフレーム アニメーションの提案を使用して、表示要素の使用中にフェードインしましたが、マウスが離れたときにこれをフェードアウトさせることができませんでした。:(

多くのウェブサイトで見たことがあるので、これが可能であることは知っていますが、私の場合は正しく機能させることができません.

これが私のコードです：

http://pastebin.com/zVQapUNz

4

1 に答える 1

1

私はjsfiddle.netであなたのコードを書きました

http://jsfiddle.net/3PD7D/1/

これは、マウスがその上に移動すると機能します。同じ概念を使用して不透明度を変更できます

from {opacity:1;}
to {opacity:0;}

メニューを非表示にします。ただし、これにより、背後にあるものはすべて透明になりますが、クリックすることはできません。アニメーションの終了フレームに display:none を追加するとどうなるかは試していません。

于 2012-06-15T18:33:23.460 に答える