鼠标跟随提示框
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";
}
}
});
以上是关于鼠标跟随提示框的主要内容,如果未能解决你的问题,请参考以下文章