你对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;  
}  
 

◆鼠标悬停tip效果实例XHTML代码

ExampleSourceCode

 
 
alt="www.mb5u.com"width="200"height="90"/> 
 
 
 

◆查看鼠标悬停tip运行效果

SourceCodetoRun

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
 
content="text/html;charset=utf-8"/> 
 
 
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;  
}  
 
 
 
_fcksavedurl="http://www.mb5u.com"> 
_fcksavedurl="/uploads/divcss/logo3.gif"alt="www.mb5u.com"  
width="200"height="90"/> 
 
 

[可先修改部分代码再运行查看效果]

【编辑推荐】

1. CSS设置滚动条颜色步骤
2. JavaScript动态创建div属性和样式
3. SPAN元素和DIV元素的区别
4. CSS2.0中page-break-after属性用法
5. 探究CSS中border:none;与border:0;的区别