onmouseover的想法

最新推荐文章于 2025-08-09 00:03:02 发布

lnn2007

最新推荐文章于 2025-08-09 00:03:02 发布

阅读量541

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lnn2007/article/details/6749846

本文介绍了一种使用JavaScript实现的鼠标悬停显示提示框的方法。通过为特定元素添加事件监听器，在用户的鼠标悬停于这些元素上时，动态创建并显示带有元素ID的提示信息。该方法适用于网页中需要提供额外信息展示的场景。

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
function shows(id){
   var div = document.getElementsByTagName("div");
   if(document.getElementById(id+"0")){//没有if在第一次会产生正确效果之后就永远存在了
     document.getElementById(id+"0").style.visibility = "visible";
     return;
   }
   for(var i=0;i<div.length;i++){
      if(div[i].getAttribute("id")==id){
        var tool = document.createElement("div");
     tool.style.visibility = "visible";
     tool.setAttribute("id",div[i].getAttribute("id")+"0");
     tool.style.position = "absolute";
     tool.style.top = parseInt(div[i].style.top)+10+"px";
     tool.style.left = "0px";
     tool.innerHTML = div[i].getAttribute("id");
     document.body.appendChild(tool);//建了结点一定要添加啊
     continue;
      }

   }
}
function hide(id){
var div = document.getElementById(id+"0");
div.style.visibility = "hidden";

   }
</script>
</head>