CSSでラベルを非表示にする方法

方法: 1. "opacity:0" ステートメントを使用します; 2. "display:none" ステートメントを使用します; 3. "visibility:hidden" ステートメントを使用します; 4. top でposition 属性を使用します。 Bottom、Left、Right 属性は、要素ラベルを表示領域の外に移動します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

最初の方法は、Opacity プロパティを使用することです。

このプロパティは、オブジェクトの不透明度を取得または設定することを意味します。透明度が 0 の場合、視覚的には次のようになります。は消えましたが、依然としてその位置を占めており、Web ページのレイアウトで役割を果たしています。ユーザーのインタラクションにも応答します。この属性が追加された要素の場合、背景と要素のコンテンツもそれに応じて変更されます。この機能を使用して、優れたアニメーション効果を作成できます。ここでは単純な小さな効果を作成しました。コードは次のとおりです:

注: この属性は、IE9 以降のブラウザと互換性があります。IE8 以前のバージョンでは、代替フィルタ属性 (例: filter:Alpha(opacity=50)) がサポートされています。

2 番目の方法は、Display 属性を使用する方法です。

この属性は実際の非表示要素です。要素の表示属性が none の場合、要素は表示属性を使用します。視界から消えてしまい、ボックスモデルすら生成されず、ページ上のどの位置にも配置されなくなるだけでなく、その子要素も一緒にボックスモデルから消えてしまいます。これとその子要素に追加されたアニメーション効果やインタラクションは効果がありません。 jq の show()、hide()、および toggle() メソッドは、display の値を変更することで効果を変更します。

#3 番目の方法は、Visibility 属性を使用することです。

この属性は、opacity 属性に似ています。属性値がhidden, 要素 非表示になり、独自の位置を占め、Web ページのレイアウトに影響を与えます。不透明との唯一の違いは、ユーザーの操作に応答しないことです。さらに、要素は画面読み上げソフトウェアで非表示になります。このプロパティは、初期状態と終了状態が異なる限りアニメーション化することもできます。これにより、表示状態の切り替え間の遷移アニメーションが時間的にスムーズになります。

注:

1. Internet Explorer (IE8 を含む) のどのバージョンでも機能します。 「inherit」および「collapse」属性値はサポートされていません。

2. 要素の可視性が非表示に設定されているが、その子要素を表示したい場合は、表示したい子要素に Visibility:visible; を追加するだけです。 p タグ内の番号ではなく、非表示の要素にカーソルを合わせてみると、マウス カーソルが指に変わらないことがわかります。現時点では、マウスをクリックしてもクリック イベントはトリガーされません。

タグ内の

タグは、引き続きすべてのマウス イベントをキャプチャできます。マウスをテキスト上に移動すると、

自体が表示され、イベントの登録が有効になります。

4 番目の方法は、Position 属性を使用する方法です。

この属性の意味は、要素をドキュメント フローおよび視覚領域の外に移動することです。この属性はレイアウトには影響せず、要素を操作可能なままにすることもできます。この属性を適用すると、主に、特定の値に到達して現在のページを離れる方向 (上、左、右、下) を制御できます。

注: このメソッドを使用してフォーカス可能な要素を非表示にすると、ユーザーがその要素にフォーカスを与えたときに使用不可エラーが発生するため、使用しないでください。フォーカスの切り替えが必要です。この方法は、カスタム チェックボックスやラジオ ボタンを作成するときによく使用されます。

推奨学習:

css ビデオ チュートリアル

以上がCSSでラベルを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。