内容。而鼠标悬停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>
1、首先新建一个html文件，命名为test.html，在test.html文件内，使用table标签创建一个表格，用于测试。
2、在test.html文件内，设置table标签的class属性为mytable，同时设置边框为1px。
3、接着在css标签内，通过class设置表格的样式，定义它的宽度为300px,高度为200px。
4、在css标签内，通过td元素名称和“:hover”选择器定义当鼠标指向单元格时，改变单元格的背景颜色，设置为红色。
5、最后在浏览器打开test.html文件，鼠标经过之后，即可变色。
试试这个.
图片我用的(
new:
http://www.lanrentuku.com/lanren/png/wall_eve_harddisk/wall_eve_harddisk_03.png
old:
http://www.lanrentuku.com/lanren/png/wall_eve_harddisk/wall_eve_harddisk_12.png
)只能上传一个,自己下载下吧
<html>
<head>
<script>
window.onload = function()
{
img1.style.clip = "rect(0 256 256 0)"
img2.style.clip = "rect(0 256 0 0)"
}
function showNew()
{
window.clearInterval(myTime)
var i=0
var myTime = window.setInterval(function()
{
img1.style.clip = "rect("+ i +" 256 256 0)"
img2.style.clip = "rect(0 256 "+ i +" 0)"
i+=16
if(i>256)
{
window.clearInterval(myTime)
}
},1)
}
function showOld()
{
var i=0
var myTime = window.setInterval(function()
{
img1.style.clip = "rect("+ (256-i) +" 256 256 0)"
img2.style.clip = "rect(0 256 "+ (256-i) +" 0)"
i+=16
if(i>256)
{
window.clearInterval(myTime)
}
},1)
}
</script>
</head>
<body>
<div>
<img id="img1" src="old.png" style="position:absolute" onmouseover="showNew()" />
<img id="img2" src="new.png" style="position:absolute" onmouseout="showOld()" />
</div>
</body>
</html>
