鼠标hover过渡动画（已验证）

在这里插入图片描述
基于css中的grid方案实现的一个hover小动画，以下代码基于vue2，其他的可以直接复制html和css就可以，注意：以下代码在部分浏览器不兼容
注：部分代码来自我接入的GPT4o/Claude网站

<template><div class="hoverbtn"><div class="btns">hoverme</div><div class="detail"><div class="content"><div class="inner">测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA</div></div></div></div>
</template><style scoped>
.btns {width: 100px;height: 40px;background: #19be6b;
}
.hoverbtn {width: 100px;line-height: 40px;border-radius: 8px;color: #fff;font-size: 18px;margin: 40px auto;
}
.detail {display: grid;grid-template-rows: 0fr;transition: 0.5s;font-size: 14px;
}
.hoverbtn:hover .detail {grid-template-rows: 1fr;
}
.content {width: 300px;overflow-y: hidden;line-height: 1.5;background: #2454ff;
}
</style>