鼠标跟随提示框

Posted 武奘

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标跟随提示框相关的知识,希望对你有一定的参考价值。

鼠标移入某区域中鼠标右下角显示提示信息:

$(document).ready(function(){
// 创建一个div显示提示信息
var dropTitle = document.createElement("div");
dropTitle.id= "backdropTitle";
dropTitle.style.backgroundColor="#fff";
dropTitle.innerhtml="提示信息";
document.getElementsByTagName(‘body‘)[0].appendChild(dropTitle);

// 鼠标移入遮罩层事件
var backdropTitle = document.getElementById("backdropTitle");
var backdropBorderS = document.getElementsByClassName("backdrop-border");
backdropTitle.style.display = "none";
for(var i=0,len=backdropBorderS.length;i<len;i++){
backdropBorderS[i].onmousemove = function(evt) {
var oEvent = evt || window.event;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
backdropTitle.style.display = "block";
backdropTitle.style.position = "absolute";
backdropTitle.style.left = oEvent.clientX + scrollleft + 10 + "px";
backdropTitle.style.top = oEvent.clientY + scrolltop + 10 + "px";
backdropTitle.style.zIndex = "2060";
setTimeout(function(){
backdropTitle.style.display = "none";
},6000);
};
backdropBorderS[i].onmouseout = function (){
backdropTitle.style.display = "none";
}
}
});

以上是关于鼠标跟随提示框的主要内容,如果未能解决你的问题,请参考以下文章

提示框跟随鼠标移动

用JS DIV CSS 做一个信息提示框。

下拉框,鼠标悬浮提示框,断点提示框虚拟机截图方法

为啥设置了pageX和pageY创建的提示框不会随着鼠标移动

Bootstarp4 提示框

Jquery怎样实现文本输入框鼠标定位时弹出提示