飘零雾雨的专栏

欢迎到我的主博客:css探索之旅(http://blog.doyoe.com/)

纯CSS构造Tips效果

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

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

  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>

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

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

 
阅读更多
个人分类: CSS
上一篇简单的链接向右下凹陷效果
下一篇规范化的链接样式顺序?
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭