鼠标悬停<a>标签效果

下面有demo的下载。样式可以自己调整CSS。
只需要在<a>标签里面加上 title=""
这个属性就是你所要在悬浮提示窗口里面显示的内容。
这个是从网络上收集到的。据说这个可以兼容目前的所有主流浏览器。
不过个人没有条件测试，只在IE8上没有问题（IE8的限制已经够恶心的了。其他应该问题不大）
如果哪位朋友发现在某个很恶心的破浏览器中不兼容。还请各位在这里回复一下，也好在其他朋友看的时候比较方便。

就先说这么说代码这里有，demo下面下载。。。。贫道和师太约会去了……

<style type="text/css">
<!--
div#qTip {
  padding: 3px;
  border: 1px solid #666;
  border-right-width: 2px;
  border-bottom-width: 2px;
  display: none;
  background: #999;
  color: #FFF;
  font: bold 9px Verdana, Arial, Helvetica, sans-serif;
  text-align: left;
  position: absolute;
  z-index: 1000;
}
a {
color: #900;
text-decoration: none;
font-weight: bold;
}
a:hover {
background: #900;
color: #FFF;
}
hr {
margin: 24px 0;
_margin: 0;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
var qTipTag = "a"; 
var qTipX = -30; 
var qTipY = 25;
tooltip = {
name : "qTip",
offsetX : qTipX,
offsetY : qTipY,
tip : null
}
tooltip.init = function () {
	var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
	if(!tipContainerID){ var tipContainerID = "qTip";}
	var tipContainer = document.getElementById(tipContainerID);
	if(!tipContainer) {
	  tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
		tipContainer.setAttribute("id", tipContainerID);
	  document.getElementsByTagName("body").item(0).appendChild(tipContainer);
	}
	if (!document.getElementById) return;
	this.tip = document.getElementById (this.name);
	if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};
	var a, sTitle;
	var anchors = document.getElementsByTagName (qTipTag);
	for (var i = 0; i < anchors.length; i ++) {
		a = anchors[i];
		sTitle = a.getAttribute("title");
		if(sTitle) {
			a.setAttribute("tiptitle", sTitle);
			a.removeAttribute("title");
			a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};
			a.onmouseout = function() {tooltip.hide()};
		}
	}
}
tooltip.move = function (evt) {
	var x=0, y=0;
	if (document.all) {//IE
		x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
		y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
		x += window.event.clientX;
		y += window.event.clientY;
		
	} else {//Good Browsers
		x = evt.pageX;
		y = evt.pageY;
	}
	this.tip.style.left = (x + this.offsetX) + "px";
	this.tip.style.top = (y + this.offsetY) + "px";
}
tooltip.show = function (text) {
	if (!this.tip) return;
	this.tip.innerHTML = text;
	this.tip.style.display = "block";
}
tooltip.hide = function () {
	if (!this.tip) return;
	this.tip.innerHTML = "";
	this.tip.style.display = "none";
}
window.onload = function () {
	tooltip.init ();
}
</script>