close

這是滑鼠跑到flash teaching那個按鈕時,會出現下面的"flash技巧運用教學文件"的說明
★放在head與</head>之間★
<style type="text/css">
<!--
.info {
position:relative;
margin:2px;
padding:5px;
text-decoration:none;
color:#000;
border:1px solid #ccc;
background: url(img/z1.gif) #fff;
}
.info:hover {
background: url(img/z2.gif) #ccc;
color:#333;
}
.info span {
display: none;
}
.info:hover span {
background: url(img/z3.gif) #fff;
display:block;
position:absolute;
top:30px;
left:30px;
width:130px;
padding:5px;
border:1px solid #ccc;
text-align:left;
color:#000;
}
-->
</style>
★放在body之間★
<a class="info" href="#">One<span>Explain</span></a>
<a class="info" href="#">Two<span>Explain</span></a>
<a class="info" href="#">Three<span>Explain</span></a>
<a class="info" href="#">Four<span>Explain</span></a>
- 第4-10行 : 設定連結文字樣式
- 第13-14行 : 滑鼠移至連結
- 第17行 : 隱藏說明
- 第20-29行 : 說明區塊樣式,自行調整
摘自於:http://www.hsiu28.net/style/article_detail.php?id=23
全站熱搜