基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

前端技术 2023/09/04 JavaScript

很多网站，当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层，并且此层能够跟随鼠标移动，同时弹出的层带有箭头，此箭头指向鼠标悬浮的元素，下面就通过实例代码简单介绍一下如何实现此效果。
代码实例如下:

<!DOCTYPE html>
<html><head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<meta name=\"author\" content=\"http://www.phpstudy.net/\" />
<title>phpstudy</title>
<style type=\"text/css\">
#content
{
width:100px;
height:100px;
background:green;
position:relative;
margin:100px;
}
#inform
{
width:200px;
height:200px;
border:1px solid #ccc;
background:white;
display:none;
position:absolute;
}
#inform span
{
width:0px;
height:0px;
border-width:10px;
border-style:none solid solid none;
position:absolute;
}
#inform .tb-border
{
left:-10px;
border-color:transparent #ccc transparent transparent;
top:-1px;
}
#inform .tb-background
{
left:-9px;
border-color:transparent white transparent transparent;
}
</style>
<script type=\"text/javascript\">
window.onload=function()
{
var content=document.getElementById(\"content\");
var inform=document.getElementById(\"inform\");
content.onmouseover=function(ev)
{
var ev=ev||event;
inform.style.display=\"block\";
inform.style.left=(ev.clientX-this.offsetLeft+20)+\"px\";
inform.style.top=(ev.clientY-this.offsetTop-20)+\"px\";
}
content.onmousemove=function(ev)
{
var ev=ev||event;
inform.style.left=(ev.clientX-this.offsetLeft+20)+\"px\";
inform.style.top=(ev.clientY-this.offsetTop-10)+\"px\";
}
content.onmouseout=function(ev){inform.style.display=\"none\";}
}
</script>
</head>
<body>
<div id=\"content\">
<div id=\"inform\">
<span class=\"tb-border\"></span>
<span class=\"tb-background\"></span>
</div>
</div>
</body>
</html>

以上代码实现了我们的要求，当鼠标放在div中的时候能够弹出一个信息层，并且能够跟随鼠标移动，弹出层的带有指示的箭头，代码非常的简单这里就不多介绍了，如有任何疑问可以跟帖留言或者参阅相关阅读。

本文地址：https://www.stayed.cn/item/10863

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案