本文通过参考ECharts实例，介绍如何利用JavaScript在鼠标悬浮于div元素上时，展示一个包含详细信息的隐藏div。通过设置样式和编写测试代码，实现了这一功能，并展示了最终效果。
参考echarts的一个例子，鼠标悬浮在上面会出现一个详细信息的小div块。
样式：
<style> .hover-block { background-color: rgba(50, 50, 50, 0.7); z-index: 99999; border: 1px solid rgb(51, 51, 51); border-radius: 4px; white-space: nowrap; height: 160px; width: 130px; color: #fff; display: none; } .info { display: inline-block; font-size: 14px; } .sel-container:hover .hover-block { display: block; z-index: 9999; position:absolute; }style>测试代码：
<body><div class="sel-container"> <img src="images/level_one_warning.png"> <div class="hover-block" id="#hover-block" style=""> <span class="info">预警等级:4级span> <br> <span class="info">状态:onlinespan> <br> <span class="info">盘符:Rspan> <br> <span class="info">网速:235.8kb/sspan> <br> <span class="info">总存储空间:1862Gspan> <br> <span class="info">使用存储空间:632Gspan> <br> <span class="info">地点:李大人家span> div>div>body>效果：
9166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
