纯CSS构造Tips效果

原创 2007年09月29日 09:55:00

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

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

  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>

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

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

 

相关文章推荐

纯CSS3进行hover时显示带箭头的tips提示动画效果

很久没有在csdn写博客了,今日心血来潮的来继续杂记. 效果图:当鼠标放在ps,ai上显示对应的内容. 流程分析:鼠标移动显示提示,鼠标在父层(内有显示和隐藏层)时,隐藏层进行动画显示.区别于...
  • amhoho
  • amhoho
  • 2017年01月08日 19:41
  • 1146

tips帮助提示框,纯css制作

  • 2014年10月14日 11:29
  • 2KB
  • 下载

左侧TIPS 滑进滑出效果JQUERY

左侧提示 滑进滑出 平滑效果,各位童鞋如果遇到类似效果可以应用: JQUERY代码: //左侧浮动 $(".reading").hover( function(){...

CSS Secret——Coding Tips

编写灵活的CSS 灵活性 我们先来看一段代码: .noReusableButton{ padding: 6px 16px; border: 1px solid #446d88; ...
  • exialym
  • exialym
  • 2016年06月23日 23:26
  • 161

CSS---Tips1文本样式

字体样式font-variant设置字体是否以小型大写字母显示。p{ font-variant: small-caps; /* 让小写字母以小型大写字母显示。*/ }font字体设置简写组合方...

css 小小tips

css实用小技巧整理

Javascript css html学习之tips

1.一个HTML页面可以放入任意多的script节点,脚本可以body或者head中,或者两个都可以,一般我们把函数放在head里或则底部,这样就不会干扰页面的内容,逻辑更清楚2.那些老旧的实例可能会...

【Web】CSS3 一些tips总结

1.如何防止父元素塌陷?若一个父元素包含了浮动元素,它将塌陷具有零高度,具体的处理 方法有:(1) 在浮动元素后加一个div,设置clear:both;height:0;overflow:hidde...
  • WHUZXQ
  • WHUZXQ
  • 2017年05月22日 15:24
  • 159

纯css一页显示多个块的水平滑动效果

GIF图总是传不上。。。 今天公司让写一个水平滑动的小插件。 需求:移动端,自适应。 以前写过一个,用js根据每个块的宽度计算包含块的父级内容块宽度,在最外层包括一个想要的大小,overflow...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:纯CSS构造Tips效果
举报原因:
原因补充:

(最多只允许输入30个字)