做本次实验用的ie6和firefox2.0.0.17
<html>
<head>
<script type="text/javascript">
function showTip(oEvent){
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "visible";
oDiv.style.left = oEvent.clientX+5;
oDiv.style.top = oEvent.clientY+5;
}
function hideTip(oEvent){
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "hidden";
}
</script>
</head>
<body>
<img src="http://www.baidu.com/img/baidu_logo.gif" alt="百度的logo" title="this is baidu's logo"></img>
<p title="this is a paragraph!">Move your mouse over the red square.</P>
<div id="div1" style="background-color:red;height:50px;width:50px" οnmοuseοver="showTip(event)" οnmοuseοut="hideTip(event)"></div>
<div id="divTip1" style="background-color:yellow;position:absolute;visibility:hidden;padding:5px">
<span style="font-weight:bold">Custom Tooltip</span><br />
More details can go here.
</div>
</body>
</html>
1.元素的title标签表示的是鼠标悬停在element上的时候要显示的提示文本（如上面的img和p元素中的title属性）
2.另外本文主要是要说明利用div+css来实现更加复杂的鼠标提示，当鼠标在div1上发生mouseover事件的时候，调用 showTip方法
，把div1的提示divTip1的可见属性设置为visible，并定位divTip1在鼠标位置的右下方个5px，当mouseout的时候，divTip1将被设置为hidden，从而实现了自定义的复杂的鼠标提示。
3.注意如果在divTip1的style中设置height和width属性，那么当提示内容超出给div能够显示的范围，IE中将自动扩大该div的height，并使用divTip1的css，在firefox中也是延伸了块的height但是延伸的部分将不具有divTip1的css，一次在此类div中最好不要设置height和width，或者只设置两者中的一个，以达到跨浏览器的目的
4.img中src和title的区别：alt是在图片无法加载或者查看工具不支持图片是所作出的提示，title是鼠标悬停在img上是的提示
5.在div的块级元素的前后都将输出一个换行字符，而span则是行级元素，不会有换行操作
6.注意在事件处理函数中仍然是window得到事件的方法，只是在实际函数调用时使用了event，event是window的属性，而在使用window的属性时可以省略window
235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
