你对CSS实现鼠标悬停tip效果是否了解，这里向大家简单介绍一下，鼠标悬停tip效果，可以在鼠标移上去的时候有一个提示信息，我们可以将相关的信息放置在这个tip中，不影响页面美观而又能很好的传达信息。
鼠标悬停tip效果如何用CSS实现
鼠标悬停tip效果，是一个非常有用的功能，在页面布局受到局限的时候，我们不能往页面中添加过多的内容。而鼠标悬停tip效果，可以在鼠标移上去的时候有一个提示信息，我们可以将相关的信息放置在这个tip中，不影响页面美观而又能很好的传达信息。
我们用CSS可以实现这样的效果，其实这很简单，我们可以新建一个span或div，将之初始设置成：display:none，隐藏这一标签的内容。
当鼠标移上去的时候，我们将此内容显示出来。然后对其进行定位。就达到了鼠标悬停tip效果。
◆鼠标悬停tip效果实例CSS代码
ExampleSourceCode
复制
a#tip{position:relative;left:30px;top:30px;} a#tip:link{text-decoration:none;color:#c00;display:block} a#tip:hover{text-decoration:none; color:#000;display:block} a#tipspan{display:none;} a#tip:hover#tip_info{ display:block; border:1pxdashed#c00; background:#fff; padding:1px; position:absolute; top:0px; left:120px; }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
◆鼠标悬停tip效果实例XHTML代码
ExampleSourceCode
复制
<aidaid="tip"href="http://www.mb5u.com"> <spanidspanid="tip_info"> <imgsrcimgsrc="/uploads/divcss/logo3.gif" alt="www.mb5u.com"width="200"height="90"/> </span> </a>
1.
2.
3.
4.
5.
6.
7.
◆查看鼠标悬停tip运行效果
SourceCodetoRun
复制
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>www.mb5u.com</title> <styletypestyletype="text/css"> body{font:normal14px宋体} a#tip{position:relative;left:30px;top:30px;} a#tip:link{text-decoration:none;color:#c00;display:block} a#tip:hover{text-decoration:none;color:#000;display:block} a#tipspan{display:none;} a#tip:hover#tip_info{ display:block; border:1pxdashed#c00; background:#fff; padding:1px; position:absolute; top:0px; left:120px; } </style> </head> <body> <aidaid="tip"href="http://www.mb5u.com" _fcksavedurl="http://www.mb5u.com"> <spanidspanid="tip_info"><imgsrcimgsrc="/uploads/divcss/logo3.gif" _fcksavedurl="/uploads/divcss/logo3.gif"alt="www.mb5u.com" width="200"height="90"/></span> </body> </html>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
[可先修改部分代码再运行查看效果]
【编辑推荐】