js鼠标滑过div高度增加,划出高度变短,加上动画

在JavaScript中，你可以使用CSS和JavaScript相结合的方式来实现这种动态效果，比如悬停时div的高度增加，并且添加平滑的过渡动画。这里是一个基本的例子：

1. HTML部分:

<div class="hoverable" id="myDiv">Hover me</div>

2. CSS部分:

.hoverable {
  width: 200px;
  height: 50px;
  overflow: hidden; /* 隐藏超出的内容 */
  transition: height 0.5s ease; /* 设置过渡动画，高度改变时平滑过渡0.5秒 */
}

.hoverable:hover {
  height: 100px; /* 当鼠标悬停时，高度变为两倍 */
}

3. JavaScript部分（通常现代浏览器支持CSS过渡无需额外脚本，但如果需要处理更复杂的动画需求，可以考虑使用jQuery或原生JavaScript）:

// 如果你想添加一些交互性，可以在事件处理器里取消默认行为
document.getElementById('myDiv').addEventListener('mouseover', function() {
  this.style.height = '100px'; // 或者this.scrollHeight; 获取内容实际高度
});

document.getElementById('myDiv').addEventListener('mouseout', function() {
  this.style.height = '50px';
});

当你将鼠标移动到div上，它会立即显示更大的高度，然后在0.5秒内平滑地缩小回原始大小。当鼠标移开时，也会有同样的效果。