纯CSS搞的alt跟title效果

2016-02-19 13:07 10 1 收藏

今天图老师小编要向大家分享个纯CSS搞的alt跟title效果教程，过程简单易学，相信聪明的你一定能轻松get！

【 tulaoshi.com - Web开发】

style
.test{position:relative;color:#0000cc;text-decoration:none;font-size:12px;}
.test:hover{background:none;}
.test span {display: none;}

.test:hover span{display:block;position:absolute;top:20px;left:8px;border-bottom:2px solid #eee;border-right:2px solid #eee;}
.test:hover span p{border:1px solid #ccc;background:#fff;color:#000;padding:5px;text-align:left;font-size:12px;}
/style
a href="#"链接一spanp动态网站制作指南_www.knowsky.com/p/span/a     
a href="#"链接二spanp动态网站制作指南_www.knowsky.com/p/span/a     
a href="#"链接三spanp动态网站制作指南_www.knowsky.com/p/span/a

保存为htm浏览

来源:http://www.tulaoshi.com/n/20160219/1603008.html

上一篇：钩子的应用: 程序运行监视
下一篇： CSS网页中的相对定位与绝对定位

看过《纯CSS搞的alt跟title效果》的人还看了以下文章更多>>

使用纯 CSS 设计3D按钮

标签： Web开发

CSS 按钮的效率远比基本图像的按钮的效率高得多，因为它们全部都是基于文本的。所有要用 XHTML 标记只是一个无序列表——CSS 样式负责其余部分。而且，你不需要任何 JavaScript 来交换图像以实现翻卷效果，因为 CSS 伪类（pseudoclass）能够让你为链接的每个状态（链接link、已访问visited、悬停hover、激活active）建立独立的样式。纯 CSS ...

CSS实例教程：纯CSS3编写的面包屑导航

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

随着Web技术越来越先进，浏览器更新换代也很快，在国内很多网站已经有使用css3和html5的技术了，所以我们也应该多学习这些新知识，设计达人网站整理的资料，你在学校、图书上也是未必能看到的。今天我们整理了10个纯CSS3制作的面包屑导航，这些都是通过CSS3来编写，十分方便，而且实用。有些文章附有教程，大家可以学习研究一下。漂亮面...

51个纯CSS绘制的漂亮图标设计欣赏

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

CSS是网页设计师和前端人员需要了解和学习的一门语言，特别是现在很多网页使用扁平化设计，这类设计风格大部分布局、交互动画甚至是图标都会使用高级点的CSS3技能，所以我们应该熟练掌握CSS这门样式语言。今天设计达人网为大家分享51个纯CSS绘制的漂亮图标，欣赏同时，大家可以从中学习一些编写方法，另外这图标是免费的，你也可以将它用到你...

mouse_on_title.js

标签： Web开发

代码如下： var pltsPop=null; var pltsoffsetX = 5; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适 var pltsoffsetY = 5; // 弹出窗口位于鼠标下方的距离；3-12 合适 var pltsPopbg="#FFffff"; //背景色 var pltsPopfg="#880000...

PS把人物转成线搞素描效果

PS把人物转成线搞素描效果原图 &nbsTulaoshi.Comp; 最终效果 1、打开原图，按Ctrl + J复制一层，按Ctrl + Shift + U去色。 2、按Ctrl + M调曲线参数设置如下图。 PS把人物转成线搞素描效果(2) 3、按Ctrl + J把图层复制一层，图层混合模式改tulaoshi.com为滤色。 4、新建一个图层，按Ctrl + Alt + Shif...

查看更多精彩>>