随鼠标移动的提示框

最新推荐文章于 2025-04-05 14:59:21 发布

Best_卡卡

最新推荐文章于 2025-04-05 14:59:21 发布

阅读量881

点赞数

分类专栏： vue.js插件库前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43909743/article/details/125339865

版权

前端同时被 2 个专栏收录

18 篇文章

订阅专栏

vue.js插件库

10 篇文章

订阅专栏

本文介绍了如何使用HTML和JavaScript为网页上的风险列表项创建一个随鼠标移动显示的浮动提示框。通过监听`mouseover`、`mouseout`和`mousemove`事件，实现提示框的位置跟随并显示相关风险详情。

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

随鼠标移动的提示框

原生代码html demo代码案例
https://blog.csdn.net/wang_swa99er/article/details/120157802

思路：
1、准备一个浮动定位的弹窗
2、页面执行时对目标盒子做onmouseover， onmouseout，onmousemove监听
3、鼠标移动到目标盒子上，设置弹窗的top left

html

<div
      id="riskTypeColumnar"
    >
      <div
        v-for="(item,index) in riskList"
        :key="index"
        class="riskItem"
      >
      	内容
      </div>
      <div id="tanchuang">
        <div class="title">
          {{ riskDetail.title }}
        </div>
      </div>
    </div>

js

const riskDetail = ref<any>({
  title: '网络风险',
  supplierRisk: 10,
  enterpriseRisk: 20,
})
riskList.value = [
    {
      title: '网络风险',
	  supplierRisk: 10,
	  enterpriseRisk: 20,
      total: 30,
    },
    {
      title: 'APP风险',
      supplierRisk: 10,
	  enterpriseRisk: 20,
      total: 30,
    },
    {
      title: '应用风险',
      supplierRisk: 10,
	  enterpriseRisk: 20,
      total: 30,
    },
    {
      title: '数据泄露',
      supplierRisk: 10,
	  enterpriseRisk: 20,
      total: 30,
    },
    {
      title: '攻击威胁',
      supplierRisk: 10,
	  enterpriseRisk: 20,
      total: 30,
    },
  ]
onMounted(async () => {
  await getTableData()
  const riskItems = document.getElementsByClassName('riskItem');
  const propver = document.getElementById('tanchuang');
  for (let i = 0; i < riskItems.length; i++) {
    // oAs[i].index = i;
    (riskItems[i] as HTMLElement).onmouseover = () => {
      // (propver as HTMLElement).innerHTML = 'qq';
      riskDetail.value = riskList.value[i]; // 选中的div正好也是数组上的索引值，所以刚好对上
      (propver as HTMLElement).style.display = 'block';
    }
    (riskItems[i] as HTMLElement).onmouseout = () => {
      (propver as HTMLElement).style.display = 'none';
    }

    // 让提示框总是悬停在鼠标的右下角
    (riskItems[i] as HTMLElement).onmousemove = (ev:any) => {
      const e = ev || window.event;

      (propver as HTMLElement).style.left = `${e.clientX + 10}px`;
      (propver as HTMLElement).style.top = `${e.clientY + 10}px`;
    }
  }
})