Home >Web Front-end >JS Tutorial >Based on JavaScript, the mouse hover pops up the information layer with arrows that follows the mouse movement_javascript skills

Based on JavaScript, the mouse hover pops up the information layer with arrows that follows the mouse movement_javascript skills

WBOYOriginal: 2016-05-16 15:19:381513browse

Many websites can pop up an information description layer when the mouse is hovering over an element, and this layer can follow the movement of the mouse. At the same time, the pop-up layer has an arrow, which points to the element the mouse is hovering over. Here is an example The code briefly introduces how to achieve this effect.
The code example is as follows:

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</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>

The above code realizes our requirements. When the mouse is placed in the div, an information layer can pop up and can follow the movement of the mouse. The pop-up layer has an arrow indicating it. The code is very simple and I will not introduce it here. , if you have any questions, you can leave a message or refer to the relevant reading.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript implements countdown jump page_javascript skillsNext article：Javascript implements countdown jump page_javascript skills

See more

Based on JavaScript, the mouse hover pops up the information layer with arrows that follows the mouse movement_javascript skills

Related articles