CSS中具有转换的可扩展分区

Question

我的页面顶部有一个div，包含一些标题文本，在mouseenter上应该展开(在高度上)，以显示一些较小的文本。然后，在mouseleave上，它应该收回。这比听起来难..。

解决办法必须：

1. 从一个高度只适合标题，到一个高度适合所有的文本。
2. 从一个过渡到另一个。
3. 尝试使用纯CSS。
4. 如果鼠标离开，请让展开的动画暂停，而visa相反(默认为CSS，但不在jQuery中)。

我试过：

1. 在我的样式表中使用:hover，将设置的像素值更改为auto，就像在这个问题中看到的那样(但在我的样式表中，它是纯CSS)。这并没有过渡。
2. 在展开时使用设置的高度，在不同的视口大小上不起作用。
3. 使用max-height，并将其扩展为比实际展开的div更大的东西，如这个问题中所示。这意味着转换不能正常工作，在不同的设备上看起来也不一样。
4. 使用jQuery .animate()，使用auto的像素值，然后创建一个转换，就像在这个问题中看到的那样，但是动画必须在启动下一个动画之前完成，这意味着如果远离div，一系列动画可以在用户的鼠标之后持续很长一段时间。

请参阅上面的所有四个示例这里。

如前所述，纯CSS将是理想的，但如果不可能的话，我可以使用JavaScript (而且我更喜欢jQuery)。

谢谢！:)

Answer 1

尝试使用css :hover

[id^="title"] {
  height: 1em;
  overflow: hidden;
  -webkit-transition: height 1s;
  /* Transitions not working */
  transition: height 1s;
}

[id^=title]:hover {
  height: 10em;
}