18
  • display:none幅と高さがゼロになったかのように、要素を完全に非表示にします
  • visibility:hidden一方、要素を非表示にしますが、要素の元の幅と高さの長方形をドキュメントに確保します。

純粋な CSS を使用して、要素を非表示にして、高さがゼロで元の幅になるようにする方法はありますか? 高さをゼロに設定してもうまくいきません。要素をもう一度表示したいときにどの高さに設定すればよいかわからないからです。

具体的には、次のことを達成したいと考えています。

#top ul        {take up zero height but original width}
#top:hover ul  {restore original dimensions}

編集：解決しました！アイデアはheight:auto、元の高さを復元するように設定することです。

フルバージョンについては、ここhttp://jsfiddle.net/yP59s/を参照するか、CSS を参照してください。

ul {margin:0px}
#top {border:1px solid}
#top ul {height:0px;overflow:hidden}
#top:hover ul {height:auto;}

そしてhtml：

<div id="top">
    <h1>foobar</h1>
    <ul>
        <li>foo</li>
        <li>bar</li>
    </ul>
</div>
blubber
4

2 に答える 2