※ 用 CSS 比較簡單,請參考 CSS 滑鼠經過時顯示懸浮文字。如果真的想用 JS 請參考以下做法。
語法
<style>
.box{
position: relative;
}
#tips{
display: none;
position: absolute;
top: -50px;
left: 60px;
color: #fff;
font-size: .8em;
background: #346e7a;
padding: 5px;
border-radius: 5px;
}
</style>
<div class="box" onmouseover="boxOver();" onmouseout="boxOut();">
請將游標移到這裡
<div id="tips">你看到我啦(・ω・)ノ</div>
</div>
<script>
function boxOver(){
document.getElementById("tips").style.display="inline-block";
}
function boxOut(){
document.getElementById("tips").style.display="none";
}
</script>
範例
請將游標移到這裡
你看到我啦(・ω・)ノ
說明
主要是透過 onmouseover 表示滑鼠經過,onmouseout 表示滑鼠離開,再透過 style.display 去控制開啟或關閉,而提示文字的部分可以用 CSS 去設計樣式。
本篇只是其中一種範例,也可以用 JS 去控制 CSS 使用 content 來顯示文字,可以參考 CSS 滑鼠經過時顯示懸浮文字 這篇做法,當然如果要這樣的話不如一開始就用 CSS 吧,也能節省 JS 的資源。
本文是否對您有幫助?