示例1:
//在鼠标显示一个层,该层的内容为div1的内容
function showTip(e,content,ifhave){
//if(!e) e = window.event;
//alert(e);
if(ifhave==null || ifhave=='0')return;
//var div1 = document.getElementById('divdisplay'); //将要弹出的层
//div1.innerHTML="备注:"+content;
var div1 = document.getElementById(content); //将要弹出的层
var x,x1;
var y,y1;
if(window.event){
e = window.event;
x=(e.clientX+document.body.scrollLeft+10); //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
y=(e.clientY+document.body.scrollTop+6);
//if((x+400)>document.body.clientWidth){x=x-400;}
if((y+150)>document.body.clientHeight){y=y-150-6;}
}else{
x=(e.pageX+10); //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
y=(e.pageY+6);
//if((x+400)>document.body.clientWidth){x=x-400;}
if((y+150)>document.body.clientHeight){y=y-150-6;}
}
div1.style.left=x+"px"; //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
div1.style.top=y+"px";
div1.style.display="block"; //div1初始状态是不可见的,设置可为可见
//window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
div1.style.position="absolute"; //必须指定这个属性,否则div1层无法跟着鼠标动
}
鼠标悬停显示说明层的案例
原创
©著作权归作者所有:来自51CTO博客作者青春的门槛的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:前端开发中常见的一下漏洞bug
下一篇:mysql中的保留字段
![](https://ucenter.51cto.com/images/noavatar_middle.gif)
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的CSS - 鼠标悬浮线条动态变化
今天分享的是一个文字按钮链接,当鼠标悬浮时,线条会发生动态变化的效果。
css html 选择器 文字按钮 -
鼠标悬停出现页面
鼠标悬停出现页面
鼠标悬停 出现页面 -
vue鼠标悬停事件
v-bind:title="message"
html 动态绑定 vue.js 提示信息 .net