纯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来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
随机推荐
- Linux文件编辑之sed命令
文件编辑之sed命令 sed是一种流编辑器,它是文本处理中非常重要的工具,能够完美配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为模式空间 (pattern space ...
- dubbo框架揭秘之服务发布
通常情况下是通过Spring配置的方式去实现服务的发布,为了方便调试,我就不采用Spring配置的方式. DemoService demo = new DemoServiceImpl(); Appli ...
- tomcat 修改网站路径(Java之负基础实战)
1.找到server.xml 在tomcat安装路径/conf/server.xml 2.搜索webapps 添加 <Context path="" docBace=&quo ...
- php实现断点下载
HTTP断点续传原理 Http头 Range.Content-Range() HTTP头中一般断点下载时才用到Range和Content-Range实体头, Range用户请求头中,指定第一个字节的位 ...
- iOS 之 alcatraz (插件管理器)
1. 安装 1.1. 打开命令行 curl -fsSL https://raw.githubusercontent.com/supermarin/Alcatraz/deploy/Scripts/ins ...
- 建立、配置和使用Activity——启动其他Activity并返回结果
Activity还提供了一个startActivityForResult(Intent intent,int requestCode)方法来启动其他Activity.该方法用于启动指定Activity ...
- php中二维数组如何使用
最近需要使用PHP中的二维数组,就用一个简单的例子来说明PHP中二数组是如何使用 <?php $a=array('a','b','c'); $c=array('a1','b1','c1'); $ ...
- Oracle 表空间迁移
迁移表空间databump 使用databump导入导出,两个库用户必须一致,否则另一个库导入的时候会报错.所以两个库都是用helei用户. 给两个数据库的用户分别授予dba权限,这里只是实验更清晰而 ...
- C# backgroundworker使用方法
# BackgroundWorker 控件的几个实例(C# backgroundworker使用方法): 在 WinForms 中,有时要执行耗时的操作,在该操作未完成之前操作用户界面,会导致用户界面 ...
- css 清除浮动的方法
/*方法一*/ /*局部清除*/ ;visibility:hidden;display:block;clear:both;} .clr{display:inline-block;} .clr{disp ...