javascript - 悬停时临时调整元素的高度

Question

我有一个<h3>高度有限的标签（例如 100 像素，位置：绝对）并且文本溢出它。

我想做的是将它向下滑动到鼠标悬停在它上面时所需的高度并返回到原始高度（100px）。
我希望你明白我的意思

我不认为它为此使用了 slidedown() 函数，而且我的动画函数很弱。请问有什么帮助吗？

Answer 1

您可以在包含内容的 h3 内嵌套一个 div，然后将 h3 用作掩蔽容器（使用溢出：隐藏）。当用户鼠标悬停时，触发一个函数来获取内部 div 的高度（确保包括任何边距或填充）。然后执行你的高度调整动画函数（在 jquery 中，类似$('h3').animate({height: heightVar});）mouseout 触发一个函数，将 h3 的高度恢复到 100px。

这是一个示例：http: //jsfiddle.net/XR9fb/

Answer 2

scrollHeight您可以使用该属性获取元素的实际高度。现在，我对 jQuery 了解不多，但我想你可以调用 animate 将 height CSS 属性设置为scrollHeight当鼠标悬停时元素的高度，并在鼠标移出它时返回原始高度.

如果元素的高度不固定，您可以在显示完整元素之前将当前高度保存在某处，当鼠标离开元素时，您只需恢复此状态。