效果: ( 移到按鈕上時會出現下方黃色的文字說明 )
將要顯示的文字說明用 span 包起來
<body>
<a href="#" class="btnLink">Button Link<span>This is a button like link</span></a>
</body>
CSS 的內容:
<style>
a.btnLink {
display: block;
background-color: #94B8E9;
border: 1px solid black;
text-decoration: none;
text-align: center;
width: 300px;
position: relative; /* 設定錨點為相對配置, span 就可依相對於錨點的位置來做絕對配置 */
}
a.btnLink:hover {
background-color: #369;
color: #fff;
}
a.btnLink span {
display: none; /* 先將 span 設為隱藏，平常裡面的內容就不會顯示出來 */
}
/* 當滑鼠移到錨點上時，改變 span 的 style 讓它顯示出來 */
a.btnLink:hover span {
display: block;
position: absolute; /* 設為絕對位置 (相對於錨點) */
top: 1em; /* 設定 span 的位置，比錨點低 1em */
left: 2em; /* 設定 span 的位置，比錨點往右 2em */
padding: 0.2em 0.6em;
border: 1px solid #996633;
background-color: #FFFF66;
color: #000;
}
</style>
沒有留言:
張貼留言