上一篇
下一篇
纯CSS构造Tips效果
作者:飘零雾雨 日期:2007-09-15
转载请注明出处，css探索之旅-飘零雾雨的庄园
这几天心情很不好，什么事都不想做，有点莫名其妙，却让人有很疲累的感觉。
不过总这样也不是办法，强行给了自己一个作业，工作最能麻木一个人，实践证明确实非常有道理。
Tips，不知道大家对这个东东感不感兴趣，相信有title，很多人都不愿再去另做这个东东来代替title的显示效果，而我恰恰也在这群人里面：）不过title始终有它自己的局限性，效果单一，容易让人审美疲劳。
之前偶尔需要用到比较另类的title效果，也都是用JS写个简单的Tips，但总感觉用的不是那么爽。所以一直以来都想写个纯CSS的Tips效果，不过始终没有动手。然而今天终于写了，所以首先请允许我感谢坏心情，感谢坏天气，感谢麻木，感谢淡忘，感谢疲累，感谢让我郁闷的所有事和所有人，正是有了你们，我才强行让自己写了这个Tips。
［演示地址：http://www.doyoe.com/model/xhtmlcss/style/tips/tips.htm］
CSS部分：
.dymain{
width:360px;
margin:0 auto;
padding:30px 0;
background:#333;
}
a.tips{
display:block;
width:270px;
height:110px;
margin:0 auto;
}
a.tips span{
display:none;
cursor:pointer;
}
a.tips:hover{
text-decoration:none;
}
a.tips:hover span{
display:block;
width:100%;
color:#093;
background-color:#fff;
text-align:center;
margin-top:-50px;
position:relative;
z-index:2;
filter:alpha(opacity=90);
-moz-opacity:.9;
opacity:.9;
}
XHTML部分：
<!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" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>纯CSS构造Tips文字提示效果</title>
<meta name="description" content="这是一个纯构造的tips文字提示效果" />
<meta name="keywords" content="纯css, 文字提示, tips" />
<meta name="Author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
</head>
<body>
<h1>纯CSS构造Tips文字提示效果：</h1>
<p>请将鼠标移动到以下图片上：</p>
<div class="dymain">
<a class="tips" href="?"><img src="images/4.gif" alt="纯CSS构造Tips效果！" />
<span>纯CSS构造Tips效果！</span>
</a>
</div>
</body>
</html>
其实这个例子还是和一如既往的简单，看看就明白了。
心情实在不好，就不做代码分析了，如果什么问题可以和我联系。
文章来自: 
引用通告: 
Tags: 
回复
鹰[2007-10-29 05:15 PM | 
]非常使用，牛人啊