首页 > web前端 > css教程 > 单纯使用CSS实现动态提示信息

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

PHPz
发布: 2018-09-28 10:49:37
原创
1617 人浏览过

单纯使用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区调用的两种方法 :

//方法一
<a class="info" href="javascript:;"><b>需要添加注释的文本</b><span>提示信息</span></a>
登录后复制
//方法二
<a class="info" href="javascript:;"><img src="需要添加注释的图片"><span>提示信息</span></a>
登录后复制
<style> 
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 } 
/*关键代码结束*/ 
</style> 
<body> 
<div id="main"> 
<h1>单纯使用CSS实现动态提示信息</h1> 
<h1>不用js可以实现信息提示效果?!(title和alt除外)</h1> 
<h2>By [51js.com]zdzhuo</h2> 
<h2>Ie5.5+, Opera7.0, Netscap7.0, Mozilla1.4 都能正常使用</h2> 

<a class="info" href="javascript:;"><b>这是提示信息</b><span>www.51js.com</span></a>不需要js就能实现的提示信息<a class="info" href="javascript:;"><b>单纯使用CSS实现提示信息</b><span>一个非常简便的方法
原理也浅显易懂</span></a>

<a class="info" href="javascript:;"><img src="http://nb001722.sosoo.net/51js.gif" border="0"><span>这是我在51js.com的专用头像</span></a>
</div> 
</body
登录后复制
相关标签:
css
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板