cari

Rumah >hujung hadapan web >tutorial css >Hanya gunakan CSS untuk melaksanakan maklumat segera dinamik

Hanya gunakan CSS untuk melaksanakan maklumat segera dinamik

PHPz
PHPzasal
2016-05-16 12:10:411614semak imbas

Hanya gunakan CSS untuk mencapai kesan maklumat segera dinamik Kod adalah seperti berikut:

Bahagian kod 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 
}

Dua kaedah yang dipanggil dalam kawasan badan: 

//方法一
<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
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Susun atur div_CSS/HTML seperti jadualArtikel seterusnya：Susun atur div_CSS/HTML seperti jadual

Artikel berkaitan

Lihat lagi