3

css のみを使用して、ネストされた div と通常の div を、すべてのレイアウトを移動することなく、より多くのコンテンツを表示するために一番上の div をホバーできるものに変えようとしています。

基本的に：

[もっと見る]

【ホバーコンテンツで重なるコンテンツ】

または、jsfiddle でほぼ動作する例を参照してください。

http://jsfiddle.net/tchalvakspam/vVgY2/9/

残念ながら、overflow:visibleそうすると、背景スタイルをオーバーフローするコンテンツを与えることができず、判読できないままになるため、ほとんど役に立たないようです。

そうですか、overflow:visible オーバーフロー コンテンツを背景にする方法はありませんか? それが悲しい状況である場合、そのコンテンツを読みやすいホバー トゥ エキスパンド セクションに変えるために、そのコンテンツに加えることができる変更の最小量はどれくらいですか?

4

1 に答える 1

0

最後に、ホバー上の兄弟セレクターの形でソリューションを見つけて、ホバーされた要素の後の次の要素に、現在の絶対ホバー要素の代わりになるマージンを与えました。

http://jsfiddle.net/tchalvakspam/MBcDW/

したがって、関連する css は次のようになります。

#fixed-height{
    position:relative;        
    width:100%;
    height:1.25em;
    overflow:hidden;
    background-color:lightblue;
    color:red;
    z-index:10;
}
#fixed-height:hover{
    overflow:visible;
    height:auto;
    position:absolute;
    max-width:20em;
}
#fixed-height:hover + #right-below{
    margin-top:1.25em;
}
于 2012-10-17T23:16:17.953 に答える