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

来源：动视网责编：小采时间：2020-11-27 18:54:30

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

单纯使用CSS实现动态提示信息:单纯使用CSS实现动态提示信息效果，代码如下：CSS代码部分 a.info { position:relative; z-index:0; background-color:#ccc; color:#000; text-decoration:none } a.info:hover { z-index:1; background-col

推荐度：

点击下载本文 文档为doc格式

导读单纯使用CSS实现动态提示信息:单纯使用CSS实现动态提示信息效果，代码如下：CSS代码部分 a.info { position:relative; z-index:0; background-color:#ccc; color:#000; text-decoration:none } a.info:hover { z-index:1; background-col

单纯使用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实现动态提示信息

推荐度：

点击下载本文 文档为doc格式

标签：单纯使用css实现动态提示信息单纯使用css实现动态提示

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐