单纯使用CSS实现动态提示信息效果，代码如下：

CSS代码部分a.info {

position:relative;

z-index:0;

background-color:#ccc;

color:#000;

text-decoration:none

}

a.info:hover {

z-index:1;

background-color:#ff0

}

a.info span {

display: none

}

a.info:hover span {

display:block;

position:absolute;

top:12px; left:2px;

width:160px;

border:1px solid #0cf;

background-color:#cff;

color:#000;

text-align: center

}

body区调用的两种方法：//方法一

需要添加注释的文本提示信息//方法二

提示信息

body { font:verdena; font-size:14px; color:#000 }

h1{ font:verdena; font-size:22px; color:#000 }

h2{ font:verdena; font-size:15px; color:#000; text-align:left }

div#main { margin:30 }

/*关键代码开始*/

a.info {

position:relative; z-index:0; background-color:#ccc; color:#000; text-decoration:none }

a.info:hover {

z-index:1; background-color:#ff0 }

a.info span {

display: none }

a.info:hover span { display:block; position:absolute; top:25px; left:60px; width:130px; border:1px solid #0cf; background-color:#cff; color:#000; text-align: center }

/*关键代码结束*/

单纯使用CSS实现动态提示信息

不用js可以实现信息提示效果?!(title和alt除外)

By [51js.com]zdzhuo

Ie5.5+, Opera7.0, Netscap7.0, Mozilla1.4 都能正常使用

这是提示信息www.51js.com不需要js就能实现的提示信息单纯使用CSS实现提示信息一个非常简便的方法

原理也浅显易懂

这是我在51js.com的专用头像

css实现提示信息,单纯使用CSS实现动态提示信息相关推荐

html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
css 图片自适应_104道 CSS 面试题，助你查漏补缺（下）
(给前端大全加星标,提升前端技能) 作者:CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/ma ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
html css web笔记,Web/HTML/CSS/的笔记
一.web基本介绍 1.Web 是 Worl wide web 的缩写,称为全球广域网,俗称www 2.我们可以将Web理解为当前的一种互利网,对于我们来说更多的就是网站服务. 3.网站我们可以认为是 ...
css预编译其器,CSS预处理器之——Less
Less,顾名思义,少,在我看来,它有着与jQuery一样的思想--Write Less,Do More,尽管实际上这两者是完全不同的两个东西. Less是一个CSS预处理器,先不管人们为何这样命名, ...
css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发来源 | web前端开发我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
html css 命名规范,浅谈css命名规则(新手必看)
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...
css覆盖规则_条件 CSS
在CSS的世界中,总是有很多实验性的属性先行,正因为这些先行者在不断的探索新的特性,才让CSS越来越强大.而这些实验性的特性并没有立马得到众多浏览器的支持,为了能让这些实验性特性能在部分支持的浏览器上 ...
css 变量_如何将CSS变量用于动画
css 变量当我们在讨论中提到CSS时,我们通常将其称为愚蠢的语言. 一种声明性语言,缺乏逻辑和洞察力: 但这不是真实的现实. 多年来,开发人员一直渴望标准CSS中的变量,长期以来一直被诸如LESS ...

css实现提示信息,单纯使用CSS实现动态提示信息

单纯使用CSS实现动态提示信息

不用js可以实现信息提示效果?!(title和alt除外)

By [51js.com]zdzhuo

Ie5.5+, Opera7.0, Netscap7.0, Mozilla1.4 都能正常使用

css实现提示信息,单纯使用CSS实现动态提示信息相关推荐

最新文章

热门文章