Mouse hover pops up the information layer with arrows that follow the mouse movement:
Many websites, when hovering over an element of the mouse can pop up a message to explain the layer, and this layer can follow the mouse movement, while the layer of the popup with arrows, this arrow pointing to the mouse hovering elements, the following is a brief description of how to achieve this effect through the instance code.
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "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><Scripttype= "Text/javascript">window.onload=function(){ varcontent=document.getElementById ("content"); varInform=document.getElementById ("Inform"); Content.onmouseover=function(EV) {varEV=EV||event; Inform.style.display="Block"; Inform.style.left=(Ev.clientx- This. Offsetleft+ -)+"px"; Inform.style.top=(Ev.clienty- This. OffsetTop- -)+"px"; } content.onmousemove=function(EV) {varEV=EV||event; Inform.style.left=(Ev.clientx- This. Offsetleft+ -)+"px"; Inform.style.top=(Ev.clienty- This. OffsetTop-Ten)+"px"; } content.onmouseout=function(EV) {Inform.style.display="None";}}</Script></Head><Body><DivID= "Content"> <DivID= "Inform"> <spanclass= "Tb-border"></span> <spanclass= "Tb-background"></span> </Div></Div></Body></HTML>
The above code to achieve our requirements, when the mouse in the Div can pop up an information layer, and can follow the mouse to move, pop-up layer with the indicated arrows, the code is very simple here is not more introduction, if there are any questions can be posted message or read the relevant reading.
Related reading:
1.border-color can refer to the Border-color Properties section of CSS .
The 2.onmouseover event can be found in the onMouseOver event section of JavaScript .
3.var ev=ev| | Event can be found in var ev=window.event| | What is the role of EV as a chapter.
the 4.clientX properties can be found in the Clientx event Properties section of JavaScript .
5.offsetLeft properties can be found in the usage section of properties such as Offsetleft, ClientLeft, and ScrollLeft .
The 6.onmousemove event can be found in the OnMouseMove event section of JavaScript .
The 7.onmouseout event can be found in the onMouseOut event section of JavaScript .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=9802
For more information, refer to: http://www.softwhy.com/javascript/
Mouse hover pops up the information layer with arrows that follow the mouse movement
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
