用CSS实现气泡式提示效果,CSS、DIV

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>汉南在线</title> <style type="text/css"> a.tip{ color:red; text-decoration:none; position:relative; } a.tip .popbox{ display:none; } a.tip:hover{ cursor:pointer;/*由于IE对hover伪对象支持不完善，设置了cursor:hand 才能正常显示*/ } a.tip:hover .popbox{ display:block; position:absolute; top:-240px; left:-30px; width:226px; height:242px; color:#000000; background-image:url('背景图片.gif'); background-repeat:no-repeat; padding:0px; margin:0px; border:0px; } body{ } </style> </head> <body>                 鼠标放到<a href="#" class="tip">CSS这里放一张图片<img src="草原.jpg" width="60px" height="60px" border="0px"/> Cascading Style Sheets 层叠样式表</a> 这个超链接上，可以看到一个提示框 鼠标放到<a href="#" class="tip">CSS这里放一张图片<img src="草原.jpg" width="60px" height="60px" border="0px"/> Cascading Style Sheets 层叠样式表</a> 这个超链接上，可以看到一个提示框 鼠标放到<a href="#" class="tip">CSS这里放一张图片<img src="草原.jpg" width="60px" height="60px" border="0px"/> Cascading Style Sheets 层叠样式表</a> 这个超链接上，可以看到一个提示框 鼠标放到<a href="#" class="tip">CSS这里放一张图片<img src="草原.jpg" width="60px" height="60px" border="0px"/> Cascading Style Sheets 层叠样式表</a> 这个超链接上，可以看到一个提示框 鼠标放到<a href="#" class="tip">CSS这里放一张图片<img src="草原.jpg" width="60px" height="60px" border="0px"/> Cascading Style Sheets 层叠样式表</a> 这个超链接上，可以看到一个提示框 鼠标放到<a href="#" class="tip">CSS这里放一张图片<img src="草原.jpg" width="60px" height="60px" border="0px"/> Cascading Style Sheets 层叠样式表</a> 这个超链接上，可以看到一个提示框 鼠标放到<a href="#" class="tip">CSS这里放一张图片<img src="草原.jpg" width="60px" height="60px" border="0px"/> Cascading Style Sheets 层叠样式表</a> 这个超链接上，可以看到一个提示框 </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]