js实现跟随鼠标移动的提示框

最新推荐文章于 2023-03-09 20:43:42 发布

zenglinhua

最新推荐文章于 2023-03-09 20:43:42 发布

阅读量3.6k

点赞数

本文链接：https://blog.csdn.net/zlinhua/article/details/8113723

版权

本文介绍了如何使用JavaScript实现一个文本框内的鼠标跟随提示框功能。当鼠标在文本框上移动时，提示框会在鼠标右下角显示，离开文本框则提示消失。通过创建一个绝对定位的div元素作为提示框，并利用onmousemove和onmouseout事件来控制提示框的显示与隐藏，同时动态调整提示框的位置和内容。

摘要由CSDN通过智能技术生成

js实现文本框内跟随鼠标移动的提示框，即当鼠标在指定的文本框内时，弹出一个提示，根据鼠标移动显示在鼠标右下角，鼠标离开文本框时提示消失，效果如下：

首先需要定义一个div块，弹出的提示实际上就是div块

<div id=mytips style="position:absolute;background-color:#F0F8FF;width:100;height:16;border:2px solid gray;display:none;filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=5);left:5;top:5"></div>

然后在需要提示的文本框绑定鼠标移动事件

οnmοusemοve="seashowtip(1,80)" οnmοuseοut="seashowtip(0,80);"

最后实现seashowtip函数传入的第一个参数为1表示显示div块，为0则不显示：

function seashowtip(flag,iwidth){
var my_tips=document.all.mytips;
var performDrawingCount = document.forms[0].elements("reservedProp(PERFORM_DRAWING_NO_COUNT)").value;
var tipsName = "当前已选图纸个数："+performDrawingCount;
if(flag){