HTML页面中编写一个提示框，动态定位与提示不同语句

最新推荐文章于 2023-01-02 21:27:42 发布

guoxu775

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量1.9k

点赞数

分类专栏： web页面相关

本文链接：https://blog.csdn.net/guoxu775/article/details/8220245

版权

web页面相关专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML页面中编写一个提示框，动态定位与提示不同语句，当鼠标经过，显示。移走，就消失。

1.写一个div

2.进行js编写，写一个函数，进行处理。

DIV:

 <div  
   style="border:1px dashed #800000; padding:15px;display:none;
   position:fixed;width:160px;height:300px;background-color:#fdd2c5;font-size:19px;z-index:auto"    id="divTips" name="divTips">  
 </div>

<script language="javascript">
 function showTips(event,tips){
     x=event.clientX;
	 y=event.clientY;
	 var obj;
     obj=document.getElementById("divTips");
	 obj.innerHTML=tips;
	 obj.style.left=x;
	 obj.style.top=y;
     obj.style.display="";
   //  document.getElementById("divTips").style.display="block";
 }
 
 function hiddenTips(){
	  document.getElementById("divTips").style.display="none";
 }

</script>

调用：

<div οnmοuseοver="showTips(event,'你好')" οnmοuseοut="hiddenTips();" style="border:1px;background-color:black;width:160px;height:20px;">显示当前的标题</div>

<div οnmοuseοver="showTips(event,'你dddddddd好')" οnmοuseοut="hiddenTips();" style="border:1px;background-color:red;width:160px;height:20px;">显示当前的标题</div>
<div οnmοuseοver="showTips(event,'你好11111')" οnmοuseοut="hiddenTips();" style="border:1px;background-color:orange;width:160px;height:20px;">显示当前的标题</div>

整个HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>


<script language="javascript">
 function showTips(event,tips){
     x=event.clientX;
	 y=event.clientY;
	 var obj;
     obj=document.getElementById("divTips");
	 obj.innerHTML=tips;
	 obj.style.left=x;
	 obj.style.top=y;
     obj.style.display="";
   //  document.getElementById("divTips").style.display="block";
 }
 
 function hiddenTips(){
	  document.getElementById("divTips").style.display="none";
 }

</script>


</head>

<body>


<div οnmοuseοver="showTips(event,'你好')" οnmοuseοut="hiddenTips();" style="border:1px;background-color:black;width:160px;height:20px;">显示当前的标题</div>

<div οnmοuseοver="showTips(event,'你dddddddd好')" οnmοuseοut="hiddenTips();" style="border:1px;background-color:red;width:160px;height:20px;">显示当前的标题</div>
<div οnmοuseοver="showTips(event,'你好11111')" οnmοuseοut="hiddenTips();" style="border:1px;background-color:orange;width:160px;height:20px;">显示当前的标题</div>
<div οnmοuseοver="showTips('你好22222')" οnmοuseοut="hiddenTips();" style="border:1px;background-color:black;width:160px;height:20px;">显示当前的标题</div>
<div οnmοuseοver="showTips('你好33333')" οnmοuseοut="hiddenTips();" style="border:1px;background-color:black;width:160px;height:20px;">显示当前的标题</div>
<div οnmοuseοver="showTips('你好44444')" οnmοuseοut="hiddenTips();" style="border:1px;background-color:black;width:160px;height:20px;">显示当前的标题</div>


<div style="left:100px; top:3000;">test</div>
 <div  
   style="border:1px dashed #800000; padding:15px;display:none;
   position:fixed;width:160px;height:300px;background-color:#fdd2c5;font-size:19px;z-index:auto"    id="divTips" name="divTips">  
 </div>

</body>
</html>

guoxu775

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML页面中编写一个提示框，动态定位与提示不同语句

HTML页面中编写一个提示框，动态定位与提示不同语句，当鼠标经过，显示。移走，就消失。1.写一个div2.进行js编写，写一个函数，进行处理。DIV: <div style="border:1px dashed #800000; padding:15px;display:none; position:fixed;width:160px;height:30
复制链接

扫一扫

专栏目录