您现在的位置是：首页 > 文章详情

杨老师课堂之JavaScript悬浮事件（鼠标移入移出事件）

日期：2018-10-25点击：448收藏

今天给大家分享一个简单的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>

效果图如下: