ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS ポップアップメニュー作成の原理と実装 By shawl.qiu_Experience 交換

純粋な CSS ポップアップメニュー作成の原理と実装 By shawl.qiu_Experience 交換

WBOYオリジナル: 2016-05-16 12:08:465154ブラウズ

純粋な CSS ポップアップメニュー作成の原理と実装 By shawl.qiu

要約:
この記事では、CSS を使用して Opera に適した複数スタイルのポップアップメニューを作成する方法を紹介します。 Firefox および IE
## #説明:
CSS ポップアップメニューを記述する重要なポイントは、マウスがターゲット上に移動したときに非表示のラベルを表示することです。
非表示にするラベルは非表示です。 display:none; 属性を使用します。
トリガー表示非表示タグは主に :hover 属性を使用し、非表示タグを表示するには display:block; を使用します。

ただし、ブラウザーが CSS を一貫してサポートしていないためです。## #Opera または Firefox の場合、純粋な CSS メニューを作成できます。これらは、任意のタグの :hover 属性をサポートします。
IE ブラウザの場合、:hover は a タグでのみ機能しますが、スクリプトの onmouseover、onmouseout を使用して、他のタグの :hover 属性をシミュレートします。
したがって、IE に適した CSS ポップアップメニューを作成するには、いくつかのスクリプトを使用する必要があります。

ディレクトリ:
1. CSS ポップアップの作成縦列の右側のメニュー
1.1 Opera、Firefox の純粋な CSS ポップアップメニューに基づいています
1.2 IE、Opera、Firefox と互換性のある CSS ポップアップメニュー (スクリプト実装)
# ##2. 水平下部ポップアップ CSS メニューを作成する
2.1 Opera、Firefox メニューに基づいた実際の純粋な CSS ポップアップ
2.2 IE、Opera、Firefox と互換性のある CSS ポップアップメニュー (スクリプト実装)

3. 結論

4. プレビュー

shawl.qiu
2006 -10-01

http://blog.csdn.net /btbtd

1. 垂直行の右側にポップアップする CSS メニューを作成します。
1.1 True Based Opera、Firefox の純粋な CSS ポップアップメニュー

行番号