<div class="item">
<h1>A</h1>
<div class="tooltip">
<p>Take a look at our crew and become a friend.</p>
<div class="arrow"></div>
</div>
</div> <div class="item">
<h1>C</h1>
<div class="tooltip">
<p>Explore our process and see how we can help.</p>
<div class="arrow"></div>
</div>
</div>
.item  {width:100px;
height:100px;
margin:15px;
background:#73a058;
float:left;
border-radius:50px;} h1 {font-family:'HeydingsCommonIconsRegular', sans-serif;
font-weight:normal;
margin:30px 0 0 0;
color:#fff;
text-align:center;
font-size:60px;
line-height:30px;} .tooltip p { font-family: sans-serif;
font-size:14px;
font-weight:;} .tooltip { width:120px;
padding:10px;
border-radius:3px;
position:absolute;
box-shadow:1px 1px 10px 0 #ccc;
margin: -500px 0 0 -20px;
background:#fff;
-webkit-transition:margin .5s ease-in-out; //样式属性过渡 (CSS 属性的名称,成过渡效果需要多少秒或毫秒),
ease-in-out 由慢到快再到慢
-moz-transition:margin .5s ease-in-out;} .item:hover { background:#6d643b;} .item:hover .tooltip {
margin:-145px 0 0 -20px;
transition: margin .15s ease-in-out;
-webkit-transition: margin .15s ease-in-out;
-moz-transition: margin .15s ease-in-out;} .arrow {
position:absolute;
margin:10px 0 0 50px;
width:;
height:;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
}

css3样式控制(鼠标滑过 显示标注信息)的更多相关文章

  1. css样式控制鼠标滑过显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 30款css3实现的鼠标经过图片显示描述特效

    今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...

  3. CSS控制鼠标滑过时的效果

    用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...

  4. Qt 样式表鼠标滑过按钮更改Text文本颜色

    QSS语法参考http://blog.csdn.net/liang19890820/article/details/51691212 Qt助手上也有比较详细的说明,选择器以及伪选择器,现在只是做个简单 ...

  5. 实用的 鼠标滑上显示提示信息的jq插件

    使用非常简单, 引用 css js文件, 将需要显示提示信息的元素 添加class="tooltip"类名, 在title属性填写提示信息就好了title="啊啊啊啊&q ...

  6. javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果

    1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 7 ...

  7. navLI鼠标滑上显示下拉导航

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>l ...

  8. td里的内容宽度自适应 及 鼠标放上显示标题div title

    td里的内容自适应宽度, 用 width:100%控制 strRight+="<td bordercolor='#DEDEDE' width='500px' height='50px' ...

  9. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

随机推荐

  1. linux-系统调用

    p { margin-bottom: 0.1in; line-height: 120% } ● Fork() 创建子进程. 创建单个子进程: pid_t pid; pid = fork(); if(p ...

  2. 合并多个工作薄workbooks到一个工作薄workbook

    微软示例教程 微软示例教程 Sub MergeAllWorkbooks() Dim SummarySheet As Worksheet Dim FolderPath As String Dim NRo ...

  3. uploadfile图片上传和ashx

    uploadify.swf需要是支持中文   $(function () {   //获取所有上传按钮id   $("div[id^='fileInput_']").each(fu ...

  4. [skill] 进程 线程

    在业务逻辑上: 进程线程没有区别. 在系统资源上: 进程拥有自己的地址空间.线程拥有自己的堆栈和临时变量,与其他线程共享地址空间. 在通信代价上: 线程间通信代价更低,实现更方便.进程通信相对开销比较 ...

  5. Hive&Hbase

    1. 两者分别是什么? Apache Hive是一个构建在Hadoop基础设施之上的数据仓库.通过Hive可以使用HQL语言查询存放在HDFS上的数据.HQL是一种类SQL语言,这种语言最终被转化为M ...

  6. Model View

    #include "dialog.h" #include "ui_dialog.h" #include<QtCore> Dialog::Dialog ...

  7. Open Live Writer 安装

    Open Live Writer来源 Windows Live Writer在2012年就停止了更新,Open Live Writer是由Windows Live WriterWriter更名而来,是 ...

  8. http://www.cnblogs.com/Lawson/archive/2012/09/03/2669122.html

    http://www.cnblogs.com/Lawson/archive/2012/09/03/2669122.html

  9. iOS开发masonry的一些使用简介

    从一开始的纯代码计算frame,虽然自认为计算frame 刚刚的,但是到后来还是开始xib的自动约束和手动约束与frame搭配使用,经历这几种方式,大概一年前开始普遍使用masonry来代码约束之后也 ...

  10. spring的多个PropertyPlaceholderConfigurer实例装配的问题

    1. 默认情况下,使用PropertyPlaceholderConfigurer多实例装配出现异常 在项目中尝试 在不同的spring的配置文件中分别引入相应的properties文件,这样会在spr ...