版权声明：本文为博主原创文章，未经博主允许不得转载。 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
分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 如有问题， 可邮件（397583050@qq.com）咨询。
