专栏首页Java技术分享圈杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)

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

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

效果图如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 杨老师课堂之Nginx学习之反向代理

    杨校
  • 杨校老师课堂基于SSM整合之用户登录案例【Eclipse - Maven版】

    Eclipse:2019.06 + Jdk:8u211 + Tomcat:9.0.14 + Maven:3

    杨校
  • 杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播

            1.3 中间区域盒子中使用无序列表进行排放图片,并且每个图片可以作为一个链接进行点击

    杨校
  • vscode用浏览器预览运行html文件

    祈澈菇凉
  • 华为校招2016.09机试 第3题: 装满篮子

    描述: 假设一个篮子最大载重为W,要求从多个不同重量物品中挑选出部分,使得其重量之和刚好等于W。输入若干个正整数,其中第一个数值为篮子载重,后面若干个数值表...

    Enjoy233
  • 软件需求设计方法学全程实例剖析幻灯片02-愿景(2020.02更新)

    pdf下载地址:http://www.umlchina.com/training/slide.html

    用户6288414
  • AI之嵌入技术(Embedding techniques)

    正如我们前面所说的,TFM和TFIDF数值矩阵主要是根据单词在文本中出现的频率而得到的,它没有考虑到词语之间的相似性。所说的前面的文章是这个:文本数据挖掘(Te...

    double
  • 蚁群算法求函数最大值一

    ants = initant(Ant, xl, xu, yl, yu); % 初始化蚁群

    mwangblog
  • 《刻意练习》第1章 有目的的练习

    yeedomliu
  • Docker网络解决方案-Flannel部署记录

    Docker跨主机容器间网络通信实现的工具有Pipework、Flannel、Weave、Open vSwitch(虚拟交换机)、Calico实现跨主机容器间的...

    洗尽了浮华

扫码关注云+社区

领取腾讯云代金券