楊老師課堂之JavaScript懸浮事件（滑鼠移入移出事件）
阿新 • • 發佈：2018-11-08
今天給大家分享一個簡單的JavaScript事件案例：
該事件屬於懸浮事件
改程式碼邏輯非常簡單，主要是 當滑鼠移動到按鈕上顯示一個盒子，移開之後盒子隱藏
JavaScript事件中
onmouseover 代表的是滑鼠指標移動到指定的物件上時發生某個動作；
onmouseout 代表的是滑鼠指標移出該指定的物件上時發生某個動作；
xxxx.style 代表一個單獨的樣式宣告
display 是個屬性 意為展示或顯示的意思
|--- block 以塊級元素顯示
|--- none 不予以顯示，可理解為隱藏
更多具體的屬性值可以檢視http://www.w3school.com.cn/cssref/pr_class_display.asp
原始碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>滑鼠移入移出顯示或隱藏的懸浮事件</title> <style> div{ width: 200px; height: 100px; background:#ccc; border:1px solid #000; display:none; } </style> </head> <body> <button id="btn">移動滑鼠到按鈕會有盒子顯示或隱藏</button> <div id="box"></div> </body> </html> <script> //1.獲取標籤元素 var oBtn=document.getElementById('btn'); var oBox=document.getElementById('box'); //2.書寫事件 oBtn.onmouseover=function(){ //alert('ok'); oBox.style.display='block'; } oBtn.onmouseout=function(){ oBox.style.display='none'; } </script>
效果圖如下:
作者： 楊校
出處： https://blog.csdn.net/kese7952
分享是快樂的，也見證了個人成長曆程，文章大多都是工作經驗總結以及平時學習積累，基於自身認知不足之處在所難免，也請大家指正，共同進步。
本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出, 如有問題， 可郵件（[email protected]）諮詢。