Javascript CSS中带转换的可扩展Div

我在页面顶部有一个

div

，其中包含一些标题文本，在

mouseenter

上，这些标题文本应展开（高度），以显示一些较小的文本。然后，当鼠标移动时，它应该缩回。这比听起来更难

解决方案必须：

从仅适合页眉的高度到适合所有文本的高度

从一个过渡到另一个

尝试使用纯CSS

如果鼠标离开，则暂停展开动画，反之亦然（默认为CSS，但不是jQuery）

我试过：

在我的样式表中使用

：悬停

，从设置的像素值更改为

自动

，如中所示（但在我的样式表中它是纯CSS）。这并没有转变

在展开时使用设置的高度，这不适用于不同的视口大小

使用

max height

，并将其扩展到比实际扩展的

div

更大的值，如中所示。这意味着转换不能正常工作，并且在不同的设备上看起来不同

使用

jQuery

.animate（）

，使用auto的像素值，然后创建一个过渡，如中所示，但动画必须在开始下一个过渡之前完成，这意味着如果远离

div

，一系列动画可以在用户鼠标后继续很长时间

请参阅以上所有四个示例

如前所述，纯CSS将是理想的，但如果不可能，我可以使用JavaScript（我更喜欢jQuery）

---

谢谢！：）

尝试使用

css

:hover

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

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

---

我不知道有任何纯CSS解决方案可以解决这个问题——将值转换为

auto

是规范中没有包括的东西；我认为这甚至是一个明确的决定，因为可能存在实施问题

但对于一个“简单”的jQuery解决方案，我只需将段落内容包装在一个额外的跨距内，将初始段落高度设置为0并溢出：隐藏，将高度的过渡保留在适当的位置–然后让jQuery只做一件事，读取跨距元素的高度，为段落设置该高度，然后再次将其设置为0以再次淡出文本

.details {
  height: 0;
  margin: 0; 
  overflow: hidden;
  transition: height 1s;
}

这样，CSS仍然通过

转换处理高度变化的“重担”（这可能在浏览器中得到优化），而jQuery/JavaScript只是用来给它一点“轻推”，让它知道该做什么。（非常确定jQuery现在在内部也在做同样的事情，使用
animate（）
，如果浏览器支持它——如果一个非常旧的浏览器不支持
转换，那么jQuery将处理回退实现，这将是一个额外的好处；在我的解决方案中，高度将立即改变，而不进行任何转换。）


请注意，在该示例中，所有四项的方法都是相同的，我没有费心更改文本内容；-）
 一种
css
方法，利用
高度
，
行高
，
字体大小
，
不透明度


[id^=“title”]p{
溢出：隐藏；
字号：0em；
线高：0em；
/*高度：0px*/
不透明度：0；
-webkit转换：高度1s；
过渡：/*高度1s，*/不透明度1s，线条高度0.1s；
}
[id^=“title”]：悬停p{
/*高度：自动*/
不透明度：1；
线高：1米；
字号：1em；
不透明度：1；
文本溢出：省略号；
}
Title 1
高度工作，但不过渡。高度工作，但不过渡。高度工作，但不过渡。高度工作，但不过渡。高度工作，但不过渡。高度工作，但不过渡。高度工作，但不过渡。高度工作，但不过渡
标题2
转换工作，但仅在一个视口大小上。。。过渡正在工作，但仅在一个视口大小上。。。过渡正在工作，但仅在一个视口大小上。。。过渡正在工作，但仅在一个视口大小上。。。过渡正在工作，但仅在一个视口大小上。。。过渡正在工作，但仅在一个视口大小上。。。过渡正在工作，但仅在一个视口大小上
标题3
高度工作，但在不同的视口大小上，过渡看起来不同。高度工作，但过渡在不同视口大小上看起来不同。高度工作，但过渡在不同视口大小上看起来不同。高度工作，但过渡在不同视口大小上看起来不同。高度工作，但过渡在不同视口大小上看起来不同
Title 4
高度和过渡工作-只有一个捕捉-动画在新的开始时不会暂停，创建了一种令人讨厌的动画堆栈。。。高度和过渡工作-只是一个捕捉-动画不会暂停时，新的开始，创建一种动画堆栈，这是恼人的。。。高度和过渡工作-只是一个捕捉-动画不会暂停时，新的开始，创建一种动画堆栈，这是恼人的
 
你能给我们提供一些我实际拥有的代码吗：“请看上面所有四个示例。”寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。见：。我不知道有任何纯CSS解决方案；但对于一个“简单”的jQuery解决方案，我只需将段落内容包装在一个额外的跨度内，将初始段落高度设置为0并溢出：隐藏，将高度的过渡保持在原位-然后让jQuery只做一件事-读取跨度元素的高度，为段落设置该高度，然后将其再次设置为0以设置为fa
$("div").mouseenter(function() {
  $(this).find('p').css('height', $(this).find('span').height());
})

$("div").mouseleave(function() {
  $(this).find('p').css('height', 0);
})