up
down
Close
架站盒子
Web Development Box
 

JavaScript 游標經過出現提示文字

│ 2857 Views │ JavaScript
※ 用 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 的資源。

延伸閱讀

本文是否對您有幫助?