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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

杨校 2018-10-26 19:08:03 浏览376
展开阅读全文
版权声明:本文为博主原创文章,未经博主允许不得转载。 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)咨询。
 

 

网友评论

登录后评论
0/500
评论
杨校
+ 关注