您的位置：首页 - 代码 - CSS教程 - 正文
鼠标悬停tip效果如何用css实现？
作者：未知 文章来源：互联网 发布时间：2007-01-03 21:15:05
　　鼠标悬停tip效果，是一个非常有用的功能，在页面布局受到局限的时候，我们不能往页面中添加过多的内容。而鼠标悬停tip效果，可以在鼠标移上去的时候有一个提示信息，我们可以将相关的信息放置在这个tip中，不影响页面美观而又能很好的传达信息。

　　应用div+css布局，我们用CSS可以实现这样的效果吗？其实这很简单，我们可以新建一个span或div，将之初始设置成：display:none，隐藏这一标签的内容。（关于display可以参考这里）当鼠标移上去的时候，我们将此内容显示出来。然后对其进行定位。就达到了鼠标悬停tip效果。

　　鼠标悬停tip效果实例 CSS代码
程序代码1
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#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代码
程序代码2
<a id="tip" href="http://www.resday.com">【www.resday.com】
<span id="tip_info">
<img src="http://www.resday.com/skins/logo3.gif" 
alt="www.resday.com" width="200" height="90" />
</span>
</a>

　　查看鼠标悬停tip运行效果
程序代码3
<!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.resday.com</title>
<style type="text/css">
<!-- 
	body {font:normal 14px 宋体}
	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#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.resday.com">【www.resday.com】
<span id="tip_info"><img src="http://www.resday.com/skins/logo3.gif" alt="www.resday.com" width="200" height="90" /></span>
</a>
</body>
</html>
热门文章
最新文章