XHTML+CSS应用教程——CSS实现小提示框

最新推荐文章于 2024-03-27 10:41:56 发布

iteye_13091

最新推荐文章于 2024-03-27 10:41:56 发布

阅读量99

点赞数

分类专栏： [随笔分类]技术资料收集文章标签： CSS XHTML IE

[随笔分类]技术资料收集专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<style type="text/css">

.info ul,li{list-style-type: none;}

.info li{ float:left; margin-left:30px;}

.info span{display:none; display:block;}

.info {

position:relative;

text-decoration:none;

font-size:12px;

width:250px;

text-align:center;

border:1px solid #ccc;

height:50px;

line-height:25px;

}

.info a { text-decoration:none;}

.info a span { display:none;}

.info a:hover{ position:relative;}

.info a:hover span{

display:block;

position:absolute;

top:30px;

left:60px;

width:130px;

border:1px solid #ff0000; 

background:#fff; color:#000;

padding:5px;text-align:left;

}

/*下面的代码暂时在IE内不起作用*/

.info:hover {background:#eee;color:#333;}

</style>

……

<ul class="info">

<li><a href="http://www.cainiao8.com">CSS提示<span>你可以在这里写一些提示</span></a></li>

</ul>