内容。而鼠标悬停tip效果，可以在鼠标移上去的时候有一个提示信息，我们可以将相关的信息放置在这
个tip中，不影响页面美观而又能很好的传达信息。
应用div
css布局，我们用CSS可以实现这样的效果吗？其实这很简单，我们可以新建一个span或div
，将之初始设置成：display:none，隐藏这一标签的内容。（关于display可以参考这里）当鼠标移上去
的时候，我们将此内容显示出来。然后对其进行定位。就达到了鼠标悬停tip效果。
鼠标悬停tip效果实例
CSS代码
a#tip
{position:relativeleft:30pxtop:30px}
a#tip:link
{text-decoration:nonecolor:#c00display:block}
a#tip:hover
{text-decoration:nonecolor:#000display:block}
a#tip
span
{display:none}
a#tip:hover
#tip_info
{
display:block
border:1px
dashed
#c00
background:#fff
padding:1px
position:absolute
top:0px
left:120px
}
鼠标悬停tip效果实例
XHTML代码
<a
id="tip"
href="http://www.zlbiz.com">【www.zlbiz.com】
<span
id="tip_info">
<img
src="http://www.zlbiz.com/skins/logo3.gif"
alt="www.zlbiz.com"
width="200"
height="90"
/>
</span>
</a>
查看鼠标悬停tip运行效果
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html
charset=utf-8"
/>
<title>www.zlbiz.com</title>
<style
type="text/css">
body
{font:normal
14px
宋体}
a#tip
{position:relativeleft:30pxtop:30px}
a#tip:link
{text-decoration:nonecolor:#c00display:block}
a#tip:hover
{text-decoration:nonecolor:#000display:block}
a#tip
span
{display:none}
a#tip:hover
#tip_info
{
display:block
border:1px
dashed
#c00
background:#fff
padding:1px
position:absolute
top:0px
left:120px
}
</style>
</head>
<body>
<a
id="tip"
href="http://www.zlbiz.com">【www.zlbiz.com】
<span
id="tip_info"><img
src="http://www.zlbiz.com/skins/logo3.gif"
alt="www.zlbiz.com"
width="200"
height="90"
/></span>
</a>
</body>
</html>
首先看一下图示：
就像上面两张图中的悬浮提示信息，带有漂亮的箭头。
接下来我们分步骤的来讲解！
一、触发该浮动Tip的JS函数：showMenu()
static\js\common.js文件872行，就是这个函数的定义。这段函数你看不懂没关系，会使用就行了，下面我们来讲解如何使用。
二、showMenu()的使用方法：
上面降到的这个函数定义的JS文件，它在DZ的核心JS中，所以我们使用的时候不必重新载入文件，因为系统已经早帮你加载过了，所以直接使用就可以，但是前提条件是必须在DZ系统中，比如DZ的任何页面模版文件中，插件、单页的模版文件中等等（点击查看怎么制作Discuz!单页），超出DZ系统意外，就不能使用了。
首先，得明确，这个效果必须由两部分组成：
1、显示层（直接在模版中显示的内容，鼠标移动上去后触发该浮动层）；
2、隐藏悬浮层（这个默认是隐藏的，不显示的，只有鼠标放在显示层上，才会触发显示）。
所以，我们分别建立两个组成部分。
效果如下图：
当鼠标放在文字上时，悬浮层激活，显示出来。
需要注意的是：
上面讲的是函数的基础功能，下面我们开始细化讲解，将悬浮美化，带箭头。
三、带箭头的悬浮Tip
看上面图片效果，也许弹出层的位置和箭头的位置并不是我们理想的位置，可以调节 <div id="test_menu" class="tip tip_4" style="display: none">和 <div class="tip_horn"></div>这两个层的CSS样式，左边加入距离就可以微调，比如：
看上面图片，悬浮弹出的位置是不是向左微移了一点，这里的margin-left:-100px就是说向左移动100像素
同理，箭头要向右移动，如下： <div class="tip_horn" style="margin-left:110px"></div>
如上图，箭头已经右移了110个像素。
另外，如果要修改弹出浮动层的宽度，高度，也可以在那个区域加入CSS，定义宽度，高度值。
