<!DOCTYPE HTML PUBLIC "-//W3C//DTD xHTML 1.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 400px;
height: 400px;
border: 1px #dedede solid;
margin: 100px auto;
padding: 20px;
}
.toptip{
position:relative;
}
.toptip span{
display: none;
}
.toptip:hover span{
display: block;
width: 200px;
height: 100px;
border: 1px #000 dashed;
position: absolute;
top: 22px;
left: 2px;

}
</style>
<BODY>
<div id="box">
<a href="#" class="toptip">链接我链接我<span>我是悬浮层</span></a>这里是大本营
</div>

</BODY>
</HTML>

======================

纯css提示效果 提示层的更多相关文章

  1. 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  2. 纯CSS实现tooltip提示框，CSS箭头及形状

    本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...

  3. 纯CSS制作冒泡提示框

    来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...

  4. 旁门左道通过JS与纯CSS实现显示隐藏层

    想必大家在开发前端页面时,肯定少不了显示隐藏层这一技术点.那么我简单粗暴地总结了以下两个小demo. 要实现该截图的功能:鼠标移动到我的好友这个选项卡时,灰色的隐藏层就会出现.

  5. 纯CSS滑动效果

    原文地址:Pure CSS Slide Up and Slide Down 示例地址:Pure CSS Slide Demo 原文日期: 2013年08月26日 翻译日期: 2013年08月27日 如 ...

  6. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  7. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...

  8. 纯css抖动效果

    HTML: <button class="shake">按钮</button> CSS: .shake{ width: 120px; height: 33p ...

  9. 发光加载环动画-纯CSS动画效果-如何创建CSS3旋转预加载器（参照https://www.bilibili.com/video/BV1V4411C7z5?from=search&seid=9741275927942612817）

    //css部分 body{ margin:; padding:; background: #262626; } .ring{ position: absolute; top:50%; left: 50 ...

随机推荐

  1. MongoDB之建立Windows和本地虚拟机的双向连接

    本文主要分享如何将MongoDB数据库在Windows系统和本地虚拟机系统建立双向连接,我们将借助MongoDB的可视化工具Robomongo来实现.首先,应该确保你的Windows系统和本地虚拟机系 ...

  2. PHP 使用Echarts生成数据统计报表

    echarts统计,心血来潮~~ 先看下效果图 看下代码 HTML页面  为ECharts准备一个Dom,宽高自定义 <div class="panel panel-info" ...

  3. Python爬虫(十六)_JSON模块与JsonPath

    本篇将介绍使用,更多内容请参考:Python学习指南 数据提取之JSON与JsonPATH JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它是的人们很容易 ...

  4. lucene构建同义词分词器

    lucene4.0版本号以后 已经用TokenStreamComponents 代替了TokenStream流.里面包含了filter和tokenizer 在较复杂的lucene搜索业务场景下,直接网 ...

  5. 【Android】定位与解决anr错误记录

    问题描写叙述 cocos2d-x游戏项目androidproject接入sdk.支付成功后,java代码回调lua方法.产生了anr. 怎样定位anr? watermark/2/text/aHR0cD ...

  6. SDUTOJ 贪心 -商人小鑫

    题目描写叙述 小鑫是个商人,当然商人最希望的就是多赚钱.小鑫也一样. 这天,他来到了一个遥远的国度.那里有着n件商品,对于第i件商品须要付出ci的价钱才干得到. 当然.对于第i件商品,小鑫在自己心中有 ...

  7. 五.RabbitMQ之路由（Routing）和主题（topics）

    翻译官网的文章已经翻译了几天了,这份官方文档写的总体算是很简洁易懂.它让我们很快的入门并了解了RabbitMQ的运作原理和使用方式.本篇最后介绍一下Exchange的另外两种类别,即direct和to ...

  8. svn协同开发下的dll版本管理最佳实践

    作为一名开发人员,常常碰到的一个问题是,当使用svn签出一份最新代码时,经常不能一次编译通过,导致花费大量时间去解决编译问题,这里碰到的问题一般可以分为三类: 1. 由于提交代码的开发人员失误,忘记提 ...

  9. .Net 异步方法， await async 使用

    最近朋友问起await  和 async第一次听说这个await ,就查了一下这个await使用在于 异步方法async 中,中文意思就是等待,经过一系列的百度参考简单的明白了这个东西的意思,  异步 ...

  10. Android项目实战（三十七）：Activity管理及BaseActivity的实现

    Ps:7-10月 完成公司两个app项目上架.漏掉的总结 开始慢慢补上. 一.写一个Activity的管理类 1.单例模式,以栈(先进后出)的形式存储Activity对象 public class A ...