纯css 构造的tip
css部分:
<style>
.abc{
margin-top:20px;
}
span{
position:relative;
display: inline-block;
background: red;
}
span:hover{
cursor:pointer;
}
span:hover:before{
content:"";
border-radius: 3px;
color:#fff;
padding: 10px;
position:absolute;
left:100%;
top:-70%;
margin-left: 8px;
white-space: pre;
}
span:hover:after{
content: "";
position: absolute;
width:0%;
height: 0%;
border-right: 8px solid #2085C5;
border-top:8px solid transparent;
border-bottom: 8px solid transparent;
}
</style>
纯css 构造的tip的更多相关文章
- 贴心小技能——纯CSS实现的帮助提示
1. 新技能传授---哒哒哒哒 我们经常会接到这样的小需求,鼠标放在某个位置实现一段小提示. 你还在用js实现这样一个小功能,你就太out了,来看看我们用纯CSS打造的帮助提示. 2. html &l ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- 纯CSS箭头,气泡
原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...
- 24, CSS 构造超链接
1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; Text-d ...
- 纯CSS实现的很酷的卡通肖像和眨眼动效
产品设计技术趋势 当前产品设计和开发的一个主要技术趋势除了响应式外, 还有尽量使用CSS/HTML5技术替代图片,这样能够获得非常好的设计扩展性和页面訪问性能. CSS卡通实例 以下就是一个英国WEB ...
- css之纯css实现流程导航效果
:::tip 使用纯css线上 流程导航效果. 本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪 该方法IE下不支持 利用裁剪 clip ...
- Sultana后记:纯css也能写col,select,datepicker,carousel...
未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持.如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架.通过 ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
随机推荐
- VS2010环境下用ANSI C创建DLL和使用方法(转)
源:VS2010环境下用ANSI C创建DLL和使用方法 . 创建DLL工程 1.2 创建一个dll工程. 操作:a.文件->新建->项目->Win32控制台应用程序. b.输入工程 ...
- ios 闪屏页的设置
ref:http://blog.csdn.net/bianruifeng/article/details/8746549
- model first,DB first,code first
code first迁移数据库1.打开程序包管理器控制台2.运行Enable-Migrations,运行之后会生成Migrations文件夹与相应的文件 Configuration.cs3.设置 Au ...
- java web面试
1. session和cookie的区别和联系,session的生命周期,多个服务部署时session管理. 原博http://blog.csdn.net/shuaishenkkk/article/d ...
- object-c中的BOOL类型
object-c中的布尔类型比C语言中的bool类型早了10年,它具有YES和NO两种值.在object-c中的布尔类型BOOL实际上是一种带符号的字符类型(signed char),它使用的空间是1 ...
- 1.4. 为现有的应用程序添加 Core Data 支持(Core Data 应用程序实践指南)
项目创建时会有 “Use Core Data" ,但是,有时没有勾选这个选项,那么就要手动链接Core Data Framework. 选中 Grocery Dude Target Gene ...
- phpcms v9文章页调用点击量方法
1.在页面加载" 2.调用统计点击的标签:: 3.最后,在写上这一句:" phpcms v9增加文章随机点击数的方法 找到文件count.php(网站根目录/api) 查找第50行 ...
- Java经典案例之“水仙花数”
/** * 描述:打印出所有的“水仙花数”,所谓的“水仙花数”是指一个三位数,其各位数字立方和等于该数本身.例如: * 153=1^3+5^3+3^3等... * 分析:利用for循环控制100-99 ...
- iPhone 屏幕分辨率
5S 640 x 1136 5 640 x 1136 4s 640 x 960 4 640 x 960 3gs 320 x 480
- Spring MVC DispatcherServlet绑定多种URL
需要学习的内容: http://my.oschina.net/shishuifox/blog/215617 当前的处理方式,在web.xml中配置: <servlet> <servl ...