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的更多相关文章

  1. 贴心小技能——纯CSS实现的帮助提示

    1. 新技能传授---哒哒哒哒 我们经常会接到这样的小需求,鼠标放在某个位置实现一段小提示. 你还在用js实现这样一个小功能,你就太out了,来看看我们用纯CSS打造的帮助提示. 2. html &l ...

  2. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  3. 纯CSS箭头,气泡

    原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...

  4. 24, CSS 构造超链接

    1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; Text-d ...

  5. 纯CSS实现的很酷的卡通肖像和眨眼动效

    产品设计技术趋势 当前产品设计和开发的一个主要技术趋势除了响应式外, 还有尽量使用CSS/HTML5技术替代图片,这样能够获得非常好的设计扩展性和页面訪问性能. CSS卡通实例 以下就是一个英国WEB ...

  6. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  7. Sultana后记:纯css也能写col,select,datepicker,carousel...

    未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持.如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架.通过 ...

  8. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. 一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

随机推荐

  1. 【转】C++ 11 右值引用的理解

    右值引用的目的之一,是为了C++中一个比较影响性能的问题:拷贝临时对象,例如,在 int foo(){ ... } int x; x = foo(); 中,在第三句中,发生了以下的事情: 1.销毁 x ...

  2. leetcode-005 reorder list

    1 package leetcode; public class ReOrderList { public void reorderList(ListNode head) { if(head==nul ...

  3. 使用Python脚本操作MongoDB的教程

    Reference:  http://www.jb51.net/article/64225.htm

  4. Python3基础 frozenset() 创建一个不可更改的集合

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  5. WDA 程序文本翻译OTR

    1.针对直接使用表字段,数据元素的情况: 1.1修改数据元素对应的语言值:DD04T. 1.2模拟SE63插入翻译条目:LXE_LOG 1.3运行时文件翻译条目:DDFTX *&------- ...

  6. Nginx中的信号量(信号控制)

  7. centos5.5 mount new harddisk

    Linux 系统挂载数据盘 1.查看数据盘  使用"fdisk-l"命令查看 2. 对数据盘进行分区 执行"fdisk /dev/sdb"命令,对数据盘进行分区 ...

  8. Intel为什么做不好手机CPU?

    Intel大名鼎鼎,在CPU界无人不知无人不晓,然而在当前主流的手机CPU市场上却是远远落后日本的ARM公司,这到底是Intel技术不足,还是ARM过于强大呢,今天我们就来探讨一下. 故事要从2006 ...

  9. Intent的属性及Intent-filter配置——Data、Type属性与intent-filter配置

    Data属性通常用于向Action属性提供操作的数据,Data属性接受一个Uri对象,一个Uri对象通常通过如下形式的字符串来表示: content://com.android.contacts/co ...

  10. Flash对不同的浏览器的兼容性

    现在遇到两个Flash的兼容性问题: 1.找不到指定的摄像头(VCamera),可是该摄像头在QQ等IM工具中是可以正常使用的 2.能找到摄像头,不过他的预览是黑屏 针对第一个问题: a.采用IE内核 ...