<!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. 自己动手写http服务器——处理http连接（二）

    关于http报文格式请看这篇文章 //http_conn.h #ifndef HTTPCONNECTION_H #define HTTPCONNECTION_H #include <unistd ...

  2. java学习笔记IO之File类

    File类总结 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Times } p.p2 { margin: 0.0px 0.0px 0.0p ...

  3. vector删除元素与清除内存空洞

    问题:stl中的vector容器经常造成删除假象,这对于c++程序猿来说是极其讨厌的,<effective stl>大师已经将之列为第17条,使用交换技巧来修整过剩容量. 内存空洞这个名词 ...

  4. 泛泰A870（高通APQ8064t 600 cpu） Mokee4.4.2（Android4.4） 图赏

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3lob3N0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  5. ajax初探--实现简单实时验证

    学习技术最好的方式就是在做中学,做一个小demo来对前端输入进行实时验证. 利用ajax技术和Sevlet技术来实现,使用原生的js. 源码可访问,我的Github 什么是ajax Ajax 即&qu ...

  6. node.js之路由，中间件，ge请求和post请求的参数

    一.路由 1.什么是路由 服务器需要根据不同的URL或请求来执行不一样的操作,我们可以通过路由来实现这个步骤 2.实现路由的方法 2.1.get请求访问网址时,做什么事 1 app.get(" ...

  7. Java面向对象的特征

    面向对象的特征 封装.继承.多态.(有人问第四个特征,再加抽象) 封装 体现形式(2种) 函数---提高代码的复用性 属性的私有化---将属性设置为私有的,通过提供对外的访问方法来间接操作对应属性,可 ...

  8. SQL语句 insert into 语句的写法

    方式1: INSERT INTO t1(field1,field2) VALUE('001','002'); 最好的做法明确插入的每一列,列于查错,而且漏列的几率会降低! 方式2: INSERT IN ...

  9. Jenkins in OpenCASCADE

    Jenkins in OpenCASCADE eryar@163.com Abstract. Jenkins是一个开源软件项目,是基于Java开发的一个持续集成工具,用于监控持续复制的工作,旨在提供一 ...

  10. C++ 知识点总结复习

    C++ 1.C++是静态类型语言,使用静态类型的编程语言是在编译时执行类型检查,而不是在运行时执行类型检查. 2.面向对象程序设计 C++ 完全支持面向对象的程序设计,包括面向对象开发的四大特性: 封 ...