web-dev-qa-db-ja.com

ホバーでdivとそのコンテンツを展開する方法は？

ホバー時に展開するdivを作成しようとしていますが、divでコンテンツを展開する方法を理解できません。いくつかのオーバーフローオプションを試しましたが、機能しませんでした。

.grow {
  padding: 5px 5px 5px 5px;
  border-radius:10px;
    height: 50px; 
    width: 22%; 
    margin: 5px 1% 5px 1%; 
    float: left; 
    position: relative; 
    transition:height 0.5s; 
    -webkit-transition:height 0.5s; 
    text-align: center;

}
.grow:hover {
    height: 115px; /* This is the height on hover */
}
<div class="grow" style="background-color: #2a75a9;">
    <h2>Title</h2> <br>
    Contrary to popular belief, Lorem Ipsum is not simply random text.  It has roots in a piece of classical Latin literature
</div>

これが JSFiddle です

htmlcsscss3expand
8
Nicole

説明を非表示にするには、overflow: hiddenをparent（.grow）コンテナに追加します。これにより、ホバーに関する説明が表示されます。

さらに、<br />タグを使用する代わりに、テキストを<p>タグで囲みます。

.grow {
  padding: 5px 5px 5px 5px;
  border-radius: 10px;
  height: 49px;
  width: 22%;
  margin: 5px 1% 5px 1%;
  float: left;
  position: relative;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  text-align: center;
  overflow: hidden;
}
.grow:hover {
  height: 145px;
}
<div class="grow" style="background-color: #2a75a9;">
  <h2>Title</h2> 
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</p>
</div>
21
Weafs.py

更新するだけです。

.grow:hover {
    height: auto; /* This is the height on hover */
}
2
Aru

うまくいくかどうか、以下のリンクで確認してください。

https://jsfiddle.net/gknLstpt/9/

 .grow {
  padding: 5px 5px 5px 5px;
  border-radius: 10px;
  height: 49px;
  width: 15%;
  margin: 5px 1% 5px 1%;
  float: left;
  position: relative;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  text-align: center;
  overflow: hidden;
}
.grow:hover {
  height: 145px;
    width: 145px;
}
1
Steevan

CSSのみの場合、最初のキーは "overflow：hidden"ですが、高さを固定すると、すべての要素が同じように拡張され、テキストを含む資料はありません。 「height：auto」を実行すると、高さが適切に拡張されますが、アニメーションはサポートされません。 element.scrollHeightを使用するために、いくつかの小さなJavaScriptで両方を行う方法があります。これにより、必要なすべての要素の高さが正しくなります。

if (document.getElementsByClassName("auto")) {
  var autos = document.getElementsByClassName("auto");
  for (var i=0; i<autos.length; i++) {
    autos[i].addEventListener("mouseover", autoOver);
    autos[i].addEventListener("mouseout", autoOut);
  }
}

function autoOver() {
  this.style.height = this.scrollHeight + "px";
}

function autoOut() {
  this.style.height = "20px";
}
.auto {
  display: block;
  margin: 20px;
  width: 400px;
  height: 20px;
  overflow: hidden;
  transition: all .5s ease;
}
<div class="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

<div class="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
0
berge