自定义动态位置显示div弹窗框

最新推荐文章于 2025-05-26 09:25:49 发布

小飞侠-2

最新推荐文章于 2025-05-26 09:25:49 发布

阅读量1k

点赞数 1

本文介绍了一种使用HTML和JavaScript实现鼠标悬停时显示电压值的方法。通过设置一个隐藏的div元素，并利用jQuery监听鼠标悬停事件，计算并显示指定的电压值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先先设置一个div,

<div id="box-data" style="width: 120px; height: 50px; background-color: rgba(0,0,0,0.43);position: absolute;display:none;z-index:9999;border-radius:10px;text-align: center;">
</div>

其次,js代码:

  $('body').on('mouseover','.voltage-img',function(){
    var p = $(this).offset();  #获取当前位置
    $("#box-data").show().css({ #控制弹框位置为当前位置
        left:p.left-15,
        top:p.top+30
    }).html("<p>电压值</p><p>"+ value +"</p>");
  });