/* 
为了样式看起来更清晰，关于文字部分的content，每一种效果都完整的写了一套。
  p.s. 公共样式放在最底部，可以忽略 
*/

/* 情况一：固定height设置 */
#container1 .content {
  width: 100px;
  margin-top: 5px;
  /* 默认不显示高度 */
  height: 0;
  transition: height linear .5s;
  overflow: hidden;
}
#container1 .btn:hover + .content {
  /* 固定高度 */
  height: 150px;
}

/* 情况二：height设置为auto */
#container2 .content {
  width: 100px;
  margin-top: 5px;
  height: 0;
  transition: height linear .5s;
  overflow: hidden;
}
#container2 .btn:hover + .content {
  /* 设置高度auto后，预期应该过渡且自动撑高，但实际不会有过渡效果 */
  height: auto;
}

/* 情况三：用transform的scale代替height */
#container3 .content {
  width: 100px;
  margin-top: 5px;
  /* 默认元素的宽比例不变，高比例为0 */
  transform: scale(1, 0);
  transition: transform .5s;
  /* 让形变的中心点为顶部 */
  transform-origin: top;
  overflow: hidden;
}
#container3 .btn:hover + .content {
  /* 鼠标移入时，将宽高比例设为1  */
  transform: scale(1);
}

/* 按钮的公共样式 */
.btn {
  width: 100px;
  height: 30px;
  background: #e7e7e7;
  border: 1px solid #272727;
  transition: background ease .5s;
}

.btn:hover {
  background: yellow;
}

.content p {
  border: 1px solid;
}

#container1, #container2, #container3 {
  float: left;
}

#container2, #container3 {
  margin-left: 5px;
}