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. 【noip】华容道

    描述 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成,最少需要多少时间. 小 B 玩的华容道与经典的 ...

  2. IOS开发中UIFont字体设置

    我们在开发中很多时候要设置UIlabel,UIbutton,UItextfield的字体,这个时候我们就需要用到UIFont,下面简单介绍一下UIFont的用法,仅供参考. UIFont用于获取和设置 ...

  3. Markdown及MarkdownPad使用规则

    Markdown Markdown 是一种轻量级标记语言.它允许人们"使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档". Markdown语法简要 ...

  4. 搭建NDK环境

    2014.07.14 搭建OK,但是目前只能手动编译c代码,具体不清楚.

  5. Jconsole连接远程服务器

    本地服务器.win7,安装JDK8 远程服务器:centos6.5 ,tomcat7,java8 配置方法: 1)修改远程服务器的~/tomcat/bin/catalina.sh  文件 在 # -- ...

  6. C#中的协变OUT和逆变

    泛型接口和泛型委托中经常使用可变性 in  逆变,out  协变 从 list<string>转到list<object> 称为协变 (string 从object 派生,那么 ...

  7. KMP之我见

    第二次看kmp,才有点搞懂这个算法(我真是太弱了,就该orz陈老师和龙老师): kmp算法完成的任务是:给定两个字符串O和f,长度分别为n和m,判断f是否在O中出现,如果出现则返回出现的位置.常规方法 ...

  8. 真机调试iwatch

    http://blog.csdn.net/chenyufeng1991/article/details/48976639 错误:no symbols for paired Apple Watch 错误 ...

  9. ubuntu下Xmodmap映射Esc和Ctrl_L

    一般来说,用Vim.Emacs的人,都会有做键盘映射的想法 我当然也是,开始学习Vim的时候,就觉得,把Esc键放在左上角, 是一件很SB的事情,稍微大一点的键盘,手指必须要离开位置才能按到Esc键, ...

  10. Servlet中进行context属性的同步

    Servlet中进行context属性的同步: 必须所有使用context的servlet都进行synchronized才可以实现同步: servlet: package com.stono.serv ...