首頁 > web前端 > css教學 > 單純使用CSS實現動態提示訊息

單純使用CSS實現動態提示訊息

PHPz
發布: 2018-09-28 10:49:37
原創
1611 人瀏覽過

單純使用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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板