CSS实现鼠标悬停tip效果-css鼠标悬停效果

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

<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>

◆查看鼠标悬停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>

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

【编辑推荐】