很多网站，当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层，并且此层能够跟随鼠标移动，同时弹出的层带有箭头，此箭头指向鼠标悬浮的元素，下面就通过实例代码简单介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="//www.jb51.net/" />
<title>软件开发网</title>
<style type="text/css">
#conte
在网页设计中，有时我们需要创建一种交互效果，即当用户将鼠标悬停在特定元素上时，会弹出一个信息层，该层不仅显示额外信息，还能跟随鼠标移动，并且有一个箭头指向原来的元素。这种效果能提升用户体验，提供直观的指引。本文将通过一个JavaScript实现的例子来详细讲解如何创建这种效果。
我们来看HTML结构。在这个例子中，有两个主要的div元素：`#content`和`#inform`。`#content`是用户悬停的元素，而`#inform`则是弹出的信息层。`#inform`内包含两个span元素，分别用作箭头的边框(`.tb-border`)和背景(`.tb-background`)。
CSS部分定义了这两个div的样式。`#content`设置了宽高、背景色和相对定位，以便计算相对于它的位置来显示信息层。`#inform`则设置为绝对定位，初始状态下隐藏（display:none），并有边框和背景。两个span元素通过border属性创建箭头形状，利用透明和不透明的边框形成视觉上的三角形。
JavaScript部分使用`window.onload`确保在页面加载完成后执行。这里我们给`#content`添加了三个事件监听器：`onmouseover`、`onmousemove`和`onmouseout`。
1. `onmouseover`事件触发时，显示`#inform`信息层，并根据鼠标当前位置调整其左和上坐标，使得箭头指向`#content`。这里的`(ev.clientX - this.offsetLeft + 20)`和`(ev.clientY - this.offsetTop - 20)`用于计算信息层相对于鼠标的位置。
2. `onmousemove`事件监听鼠标移动，不断更新信息层的位置，使它始终保持与鼠标位置的相对距离。
3. `onmouseout`事件用于在鼠标离开`#content`时隐藏信息层。
整个代码的实现相当简洁高效，通过JavaScript动态更新CSS属性，实现信息层的显示、移动和隐藏，以及箭头的指向功能。这个例子展示了JavaScript与CSS的协同工作，可以为网页带来丰富的交互性。
总结来说，创建鼠标悬浮弹出跟随鼠标移动的带箭头信息层，关键在于理解JavaScript事件处理、CSS布局和三角形边框技巧。通过这些技术，我们可以为网页元素添加动态提示，提高用户的操作体验。如果你对这个效果有任何疑问或需要进一步的理解，可以通过查阅相关资料或参与讨论来深入学习。
