版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/kese7952/article/details/83419393
今天給大家分享一個簡單的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]）咨詢。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)