up
down
Close
架站盒子
Web Development Box
 

CSS 滑鼠經過時顯示懸浮文字

│ 13902 Views │ CSS
CSS 滑鼠經過時顯示懸浮文字
CSS 滑鼠經過時顯示懸浮文字
  1. HTML+CSS
  2. 實際操作
  3. 說明
  4. 實際操作(display 版)

如果需要在滑鼠經過時顯示文字或某物件,可以用CSS來簡單達成,只要在CSS中加上:hover再指定經過時要做什麼即可。

HTML+CSS

<style>
.box {
position: relative;
}
.box:hover::before {
position: absolute;
top: -50px;
left: 0;
content: '你看到我啦(・ω・)ノ';
}
</style>
<div class="box">請將游標移到這裡</div>

實際操作

See the Pen hover show CSS by kumo (@kumo-tw) on CodePen.

說明

CSS中的hover是用來控制游標經過的效果,只要在需要顯示文字的元素物件加上:hover即代表游標經過該物件時的反應,而::before代表的是在物件之前產生,如果要在之後產生則是用::after,不過這裡因為已經控制位置,因此用哪個都不影響結果,接著只要用content就可以自訂要顯示的文字。

CSS的方法有很多,不一定只能用content來顯示文字,也可以另外再設一個div,再透過display控制關閉與顯示,例如要顯示文字的部分預設是display:none;,再用CSS:hover 並在{}中寫上display:block表示滑鼠經過時顯示此物件。

實際操作(display 版)

See the Pen hover show display CSS by kumo (@kumo-tw) on CodePen.

延伸閱讀

本文是否對您有幫助?