纯css提示效果 提示层

<!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>

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

时间: 2024-11-14 12:30:14

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

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

在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个边框,下面是是一篇完成的截图(不了解的可以看看:纯CSS实现tooltip提示框,CSS箭头及形状): 首先像:after一样我们介绍另外一个CSS中“ :before ”选择器 定义和用法:(参考w3school:before选择器) :before 选择器在被选元素的内容前面插入内容,使用 co

纯CSS实现tooltip提示框,CSS箭头及形状

原文:纯CSS实现tooltip提示框,CSS箭头及形状 本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入内容,使用content属性来指定要插入的内容 例: p:after { content:"台词:-"; background-color:yellow; color:red; font-weight:bold; } 具体大家可以参

外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享

外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享 /*改写chinaobd2.com Begin*/ /*如有定义header, footer 注意设置相应的位置,颜色等*/ body { padding-top: 0px; } @media (max-width: 577px) { body { padding-top: 35px; } } /*应用效果:未应用效果时可直接清除*/ @media (min-width: 768px) { header { background: #0064A

纯CSS制作冒泡提示框

来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html 在此基础上.今天分享一篇文章给大家.假设利用CSS制作冒泡提示框. 先看2张效果图: CSS: /* 对话气泡 使用方法:使用.speech-bubble和.speech-bubble-DIRECTION类 <div class="speech-bubble speech-bubble-to

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

想必大家在开发前端页面时,肯定少不了显示隐藏层这一技术点.那么我简单粗暴地总结了以下两个小demo. 要实现该截图的功能:鼠标移动到我的好友这个选项卡时,灰色的隐藏层就会出现.  1.    通过纯CSS实现. 该方法最简单,最粗暴. 这是部分HTML代码. <div class="myfriends" >     我的好友     <div class="myfriendsList" >         <ul>        

纯css手风琴效果

1 <!doctype html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯css写的一个手风琴效果供大家学习</title> 6 <style> 7 * { margin: 0; padding: 0; } 8 body{background: #eee} 9 .e-warp { width

简单实用的纯css按钮效果

在许多网站中都需要实用到按钮,一个好看实用的css按钮即可以给访问者以美感,又可以方便开发者.下面就是一个纯css按钮,需要的可以参考. css代码 .div { display: inline-block; padding: .3em .5em; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,.2); border-radius: .3em; box-shadow: 0 1px white

纯css来实现提示框

用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用title属性时,提示框的样式是默认的,而利用自定义的data-title属性时,提示框的样式和位置自己可以随意定义), 首先,要将鼠标需要悬浮的元素相对定位, 再次,利用hover和伪类的绝对定位来显示提示的内容 代码如下: 1 <!DOCTYPE html> 2 <html lang=&

纯css抖动效果

HTML: 1 <button class="shake">按钮</button> CSS: 1 .shake{ 2 width: 120px; 3 height: 33px; 4 border-radius: 66px; 5 background-color: #00ff00; 6 border: 0; 7 color: #fff; 8 font-weight: bold; 9 } 10 /* shake 按钮抖动 */ 11 .shake:hover { 1