纯CSS构造Tips效果

最新推荐文章于 2021-08-14 17:04:34 发布

飘零雾雨

最新推荐文章于 2021-08-14 17:04:34 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： css xhtml 代码分析 html class filter

本文链接：https://blog.csdn.net/storm0/article/details/1806005

版权

CSS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

　　这几天心情很不好，什么事都不想做，有点莫名其妙，却让人有很疲累的感觉。

　　不过总这样也不是办法，强行给了自己一个作业，工作最能麻木一个人，实践证明确实非常有道理。

　　Tips，不知道大家对这个东东感不感兴趣，相信有title，很多人都不愿再去另做这个东东来代替title的显示效果，而我恰恰也在这群人里面：）不过title始终有它自己的局限性，效果单一，容易让人审美疲劳。

　　之前偶尔需要用到比较另类的title效果，也都是用JS写个简单的Tips，但总感觉用的不是那么爽。所以一直以来都想写个纯CSS的Tips，不过始终没有动手。然而今天终于写了，所以首先请允许我感谢坏心情，感谢坏天气，感谢麻木，感谢淡忘，感谢疲累，感谢让我郁闷的所有事和所有人，正是有了你们，我才强行让自己写了这个Tips。

　　［演示地址：http://www.doyoe.com/model/xhtmlcss/style/tips/tips.htm］

CSS部分：

html,body {
margin:0;
font:12px/220% "宋体";
}
img {
border:none;
vertical-align:top;
}
.dymain {
width:270px;
margin:100px;
}
a.tips span {
display:none;
cursor:pointer;
}
a.tips:link,a.tips:hover {
display:block;
text-decoration:none;
}
a.tips:hover span {
display:block;
width:100%;
color:#009933;
background-color:#fff;
text-align:center;
margin-top:-50px;
position:relative;
z-index:99;
filter:alpha(opacity=90);
-moz-opacity:0.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Doyoe, 飘零雾雨, edzmaster@gmail.com" />
<title>纯CSS构造Tips效果</title>
</head>
<body>
<div class="dymain">
<h3>请将鼠标移动到图片上：</h3>
<a class="tips" href="#"><img src="test.gif" alt="" />
<span>纯CSS构造Tips效果！</span>
</a>
</div>
</body>
</html>

　　其实这个例子还是和一如既往的简单，看看就明白了。

　　心情实在不好，就不做代码分析了，如果什么问题可以和我联系。

飘零雾雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS构造Tips效果

　　这几天心情很不好，什么事都不想做，有点莫名其妙，却让人有很疲累的感觉。　　不过总这样也不是办法，强行给了自己一个作业，工作最能麻木一个人，实践证明确实非常有道理。　　Tips，不知道大家对这个东东感不感兴趣，相信有title，很多人都不愿再去另做这个东东来代替title的显示效果，而我恰恰也在这群人里面：）不过title始终有它自己的局限性，效果单一，容易让人审美疲劳。　　之前偶尔
复制链接

扫一扫