单纯使用CSS实现动态提示信息-css教程-PHP中文网

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

PHPz

发布： 2016-05-16 12:10:41

原创

2045人浏览过

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

装修公司企业网站源码2.0

装修公司源码，采用DIV+CSS布局，首页顶部采用了超大宽屏banner焦点图切换，带伸缩功能的导航条。首页信息展示量大，有利于SEO优化，首页版块包括，导航，焦点图切换，案例，行业动态，装修经验，装修知识。源码支持伪静态，后台开启即可，服务器必须支持rewrite功能，否则无法实现伪静态功能。信息支持二级分类。后台支持信息批量修改，删除，可以支持，视频，图片，附件上传。

查看详情

//方法一
<a class="info" href="javascript:;"><b>需要添加注释的文本</b><span>提示信息</span></a>

登录后复制

//方法二
<a class="info" href="javascript:;">@@##@@<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:;">@@##@@<span>这是我在51js.com的专用头像</span></a>
</div> 
</body

登录后复制