CSS：Divは元のサイズに応じてサイズを変更します

プログラムでサイズが計算されるタイムブロックがあります。CSS：Divは元のサイズに応じてサイズを変更します

目的は次のとおりです。コンテンツがそのコンテナよりも大きい

-ifあなたが要素にカーソルを合わせると、それはそれのすべてを表示するように拡張されます。

- コンテンツがコンテナより小さい場合は何も起こりません。

ここにはfiddleがあります。

注：

-Redは、それが現在どのようにであることを意味します。

-Greenが私の目的です。

私はAngularを使用していますので、javascriptの解決策が受け入れられます。

フィドルのHTML：

.current { 
 
    width: 200px; 
 
    background-color: red; 
 
    margin-right: 10px; 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 
.current:hover { 
 
    height: auto !important; 
 
} 
 
.supposed { 
 
    width: 200px; 
 
    background-color: lightgreen; 
 
    margin-right: 10px; 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 
.supposed.small:hover { 
 
    height: auto !important; 
 
} 
 
.small { 
 
    height: 50px; 
 
} 
 
.big { 
 
    height: 100px; 
 
} 
 
.content { 
 
    height: 75px; 
 
    background-color: rgba(0,0,0,0.5); 
 
}

<body> 
 
    <div class="current small"> 
 
     <div class=" content"> 
 

 
     </div> 
 
    </div> 
 
    <div class="current big"> 
 
     <div class="content"> 
 

 
     </div> 
 
    </div> 
 
    <div class="supposed small"> 
 
     <div class="content"> 
 

 
     </div> 
 
    </div> 
 
    <div class="supposed big"> 
 
     <div class="content"> 
 

 
     </div> 
 
    </div> 
 
</body>

出典

2016-10-21 HermanTheGermanHesse

あなたはフィドルで何が問題になっていますか、違いは何ですか？ – Alvaro

2番目の赤いdivに移動し、下の部分でマウスを動かすと、緑色の大きな正方形のように振る舞います。 – HermanTheGermanHesse

CSS：角を持つ

.content { 
    height: 100%; 
} 
.current:hover { 
    height: auto !important; 
} 
.content:hover { 
    min-height: inherit; 
}

HTML：

<div class="current" ng-style="{height: calculateHeight()+'em',min-height: calculateHeight()+'em',}"> 
</div>

100％にコンテンツの高さの設定が.currentの上にマウスを移動すると、ホバリングに等しいことを保証します以上。

"height：calculateHeight（）+ 'em'"を設定すると、.contentが.currentより大きい場合に.currentを大きくする効果が得られます。

"min-height：inherit"に設定すると、.contentは少なくとも以前と同じ大きさになります。

@elveti：max-heightのインスピレーションに感謝します。

出典

2016-10-21 11:05:18 HermanTheGermanHesse

ではなく、div要素をホバリング時に自動的にコンテナの高さを設定するには、目に見えるへのオーバーフローを設定することができ、ちょうどCSSを使用しました。

この方法では、「隠れた」内側がホバリングしたときに表示されますが、内側が小さい場合はコンテナは同じままです。

.current:hover { 
    //height: auto !important; 
    overflow:visible; 
}

https://jsfiddle.net/kkw22eby/4/

出典

2016-10-21 09:33:09 Alvaro

これは私のアプリでは、バックグラウンドの行で、このイベントがいつ表示されるかを示します。また、それは良く見えません： - / – HermanTheGermanHesse

あなたは両親にmax-height代わりのheightを使用して.content子に高さを設定することにより、これを行うことができると思います。

.small .content { 
    height: 75px; 
} 
.big .content { 
    height: 500px; 
} 
.small, 
.big { 
    transition: max-height 0.4s; /* Animates the max-height */ 
} 
.small { 
    max-height: 100px; 
} 
.big { 
    max-height: 150px; 
} 
.current:hover { 
    max-height: 3000px !important; /* Will be animated to height:auto and then it stops */ 
} 
.content { 
    background-color: #369; 
}

https://jsfiddle.net/c4jhvd8m/

出典

2016-10-21 09:59:23 elveti

CSS：Divは元のサイズに応じてサイズを変更します

答えて

関連する問題