分享一个气泡提示框，练习以下技巧：(1)JS响应鼠标事件；(2)用纯CSS制作三角形。这种效果：

这是html:复制代码代码如下：DOCTYPE html html head meta charset=' UTF-8 '标题气泡对话框/title脚本src=' http : myubbletooltip。js /脚本脚本src=' http :http://Ajax。谷歌API。com/Ajax/libs/jquery/1。8 .0/jquery。量滴js /脚本样式类型=' text/CSS ' h1 { font-size : 60px；边距-top : 0；font-family: Arial，无衬线；文本-阴影： 2px 0px 10px # 292929字母-间距： 0px文本装饰：无；color: # DDDDDD} div #左{ border: 1px实心# CCCCCC；宽度： 200像素；高度： 300像素背景色-: # EEEEEEE；向左浮动：margin: 0 0 0 20px } div #内容{ border: 1px固体# CCCCCC；宽度： 600像素；高度： 300像素背景色-: # EEEEEEE；向左浮动：margin: 0px 20px} div #编辑器{ border : 1px实心# CCCCCC；向左浮动：宽度： 300像素；height: 300px} div #测试{ border: 2px固体# cccccc宽度： 400像素；高度： 400像素；} .泡泡_ tooltip _ common { z-index : 1；颜色： # 333333宽度宽度：150像素位置：绝对；display:noneborder: 1px实心# AaaAabox-shadow : 0px 0px 10px # AAA；边界半径： 5pxpadding: 5px 10px背景-颜色： # FEFAB 8；} 复制代码代码如下： /*尖端指向左侧的三角形，外缘*/.tri右{ z-index : } 2；border: 10px实心# AAA边框-颜色：透明# AAA透明透明；宽度： 0;高度： 0;绝对位置：左侧：-20px；top: 5px}复制代码代码如下： PRE类=html名称='代码'/*尖端指向左侧的三角形，内部，*//PRE。tririginner { z-index : 3；border: 8px固体# FEFAB8边框-颜色：透明#FEFAB8透明透明；SPAN style=' FONT-family : Arial，Helvetica，无衬线'/*颜色应与提示框的背景色一致*//SPANBR宽度： 0；高度： 0;绝对位置：左侧：-16px；top :7 px }/style/head body div class=' bubble _ tooltip _ common ' id=' bubble _ tooltip ' label class=' triRight '/label label class=' tririginner '/label span id=' bubble _ tooltip _ content '/span/div h1气泡对话框/h1 div id=' left ' p span on mouse over=' showToolTip(事件，'这是一个提示框)" onmouseout="HideTooltip()"鼠标放于此处，会弹出一个气泡对话框。

/span/p/div div id=' content ' pa href=' # ' on mouse over=' showToolTip(事件，'这是工具提示的内容.)onmouseout=" hide tooltip()" sharejs。com/a/p/div id="editor "内容可编辑[单击可编辑】/div/body/html PRE/PRE P/P PSPAN style=' FONT-FAMILY :微软雅黑；FONT-SIZE: 18px'STRONG这是Java脚本语言代码：/STRONG/SPAN/P P/P PRE类javascript名称='代码'函数显示工具提示(e，文本){ if(文档。all)e=事件；var obj=文档。getelementbyid(' bubble _ tooltip ')；var obj 2=文档。getelementbyid(' bubble _ tooltip _ content ')；obj2.innerHTML=文本；var ST=数学。max(文档。尸体。顶部滚动，文档。文档元素。滚动顶部)；if(导航器。用户代理。tolowercase().indexOf(' safari ')=0)ST=0；var LeftPoS=e . ClientX 20//ClientX事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区)的水平坐标if(左位置0)左位置=0；物体。风格。left=LeftPoS ' px物体。风格。top=e . clienty ST ' px物体。风格。display=' block法丁5100英镑；}函数隐藏工具提示(){ var obj=document。getelementbyid(' bubble _ tooltip ')；//obj。风格。display=" nonefadeOut(obj，5，0)；} //设置元素透明度，透明度值按工业管理学(工业工程)规则计，即0~100功能set capacity(ev，v){ ev.filters？ev.style.filter='alpha(不透明度=' v ')' : ev.style。不透明度=v/100；} //淡入效果（含淡入到指定透明度)功能法丁(elem，速度，不透明度){ /* *参数说明* elem==需要淡入的元素*速度==淡入速度，正整数（可选)*不透明度==淡入到指定的透明度，0~100(可选)*/速度=速度| | 20;不透明度=不透明度| | 100;//显示元素，并将元素值为0透明度（不可见)elem。风格。display=' block设置容量(elem，0)；//初始化透明度变化值为0 var val=0//循环将透明值以2递增，即淡入效果(function(){ SetOpacity(elem，val)；val=5；if (val=不透明度){ setTimeout(参数。cauer，speed)} })))；} //淡出效果（含淡出到指定透明度)功能fadeOut(elem，速度，不透明度){ /* *参数说明* elem==需要淡入的元素*速度==淡入速度，正整数（可选)*不透明度==淡入到指定的透明度，0~100(可选)*/速度=速度| | 20;不透明度=不透明度| | 0;//初始化透明度变化值为0 var val=100//循环将透明值以5递减，即淡出效果(function(){ SetOpacity(elem，val)；val-=5；if (val=不透明度){ setTimeout(arguments . calleeper，speed)；}else if (val 0) { //元素透明度为0后隐藏元素艾伦。风格。显示='无'；} })();}/PREBR BR P/P PRE/PRE