3

私の意図は、サイトに4つのメインナビゲーションバーを配置することです。ユーザーが1つをホバーすると、展開され、コンテンツが表示されます。しかし、コンテンツの部分はどのようにすればよいですか？

#bottom-menu:hover #contact{
    visibility: visible ;
}

ボックスが完全に展開されたときに表示すると機能しますが、問題があります。コンテンツは表示されていませんが、まだそこにあり、レイアウトが崩壊する余地が必要です。

私はjQueryを知っていますが、純粋なCSSでそれを実行したいと思います。

http://jsfiddle.net/RbZwx/1/

4

2 に答える 2

4

visibility: hidden要素がレイアウトスペースを消費し続けるようにします。

display:noneレイアウトスペースを占有しません。

「ネタバレ」と「隠し」を考えてください。

https://developer.mozilla.org/en/CSS/visibility

可視性CSSプロパティは、次の2つの目的で使用されます。

  • 非表示の値は要素を非表示にしますが、元の場所にスペースを残します。
  • 折りたたみ値は、テーブルの行または列を非表示にします。また、XUL要素を折りたたみます。

https://developer.mozilla.org/en/CSS/display

display CSSプロパティは、要素に使用されるレンダリングボックスのタイプを指定します。HTMLでは、デフォルトの表示プロパティ値は、HTML仕様に記述されている動作、またはブラウザ/ユーザーのデフォルトのスタイルシートから取得されます。XMLのデフォルト値はインラインです。

多くの異なる表示ボックスタイプに加えて、値noneを使用すると、要素の表示をオフにできます。noneを使用すると、すべての子要素の表示もオフになります。ドキュメントは、要素がドキュメントツリーに存在しないかのようにレンダリングされます。

これらの両方を読み、この特定のケースだけでなく、それらがページにどのように影響するかを学ぶことをお勧めします。

于 2012-06-16T09:45:09.097 に答える
1

を使用しdisplay: noneます。CSS 2.1：11.2を参照してください。可視性：'visibility'プロパティ：

この'visibility'プロパティは、要素によって生成されたボックスをレンダリングするかどうかを指定します。非表示のボックスは引き続きレイアウトに影響します（ボックスの生成を完全に抑制するように'display'プロパティを設定します）。'none'値の意味は次のとおりです。[...]

hidden生成されたボックスは表示されません（完全に透明で、何も描画されません）が、レイアウトには影響します。さらに、要素の子孫は、があれば表示されます'visibility: visible'。

于 2012-06-16T09:45:27.010 に答える