前言

需求：
- 有个DOM元素，里面的文本信息最多只能显示两行，其他的隐藏掉；
- 当鼠标移入的时候，需要显示一个DOM元素，该DOM元素里面有全部的文本信息，并且是有动画的（高度的变化）；
注意：
- 元素的 title 属性可以用来做提示，但是没法给显示的文本框加特定的样式；
- 该效果的实现，可以通过 CSS 和 JS 实现；
- 两种方式的不同点在于：JS可以控制鼠标放上去多少时间之后显示提示信息，CSS只要鼠标移入就会立马显示提示信息；

一、高度过渡效果

代码展示：
注意：
- 高度过渡不使用CSS的原因有以下几点：
  - 初始状态下的提示框的高度为0；
  - 当鼠标移入的时候，这个提示框的高度不确定，有些人会想到auto，但是，在初始化状态下height: 0;，是个数字，而auto是字符串，没法实现过渡，transition属性不会生效，看到的效果就是鼠标放上去就立马显示，没有一个高度渐渐增大的效果，用户体验不好；
  - 还有就是一种，设置max-height: 很大的高度值;，这种方式也是有弊端的，transition虽然能生效，但如果设置的过渡时间比较长的话，鼠标离开的时候会有卡顿，就比如说，我们的某一块的文本展示完整之后的高度是200px，而你为了兼容，设置的max-height: 1000px;，当过渡时间较长，鼠标离开的时候，先是由 1000px 到 200px，再是从 200px 到 0，我们能直接看到效果的是第二段，第一段高度的时候，你的鼠标已经离开，而展示的效果是我们看不到，所以最终呈现的就是先停顿一下，再收缩；
效果展示：