鼠标的移入、移出事件

开发工具与关键技术：DW    JS
作者：张华明
撰写时间：2019/1/27

在JavaScript中有着许多的事件，今天在这里给大家分享一个简单的鼠标移入、移出事件。

1、下面是鼠标没移入的正常状态：

2、鼠标移入后：

3、其代码如下：
（1）、在鼠标没移进去时，浏览器看到的是装着背景图片的box,而装着文字的cont则隐藏起来

	

		
你的手是我
		
不能触及的倾城温暖，
		
我的心是你
		
不曾知晓的兵慌马乱。
		
你可知道你是我不愿分享的秘密
	

（2）、鼠标移进去后，通过js来控制样式的变化，首先通过ID获取的到bax、cont。再通过onmouseover这个方法实现效果。

window.onload = function(){
		var box = document.getElementById("box");//图片盒子
		var cont = document.getElementById("cont");//文字盒子
		
		//鼠标移入事件
		box.onmouseover = function(){
			cont.style.display = "block";//鼠标移入时隐藏的文字显示
		};
		
		//鼠标移出事件
		box.onmouseout = function(){
			cont.style.display = "none";//鼠标移出时文字隐藏
		};
	}; 

4、效果如下：

5、详细代码如下：

	

		
你的手是我
		
不能触及的倾城温暖，
		
我的心是你
		
不曾知晓的兵慌马乱。
		
你可知道你是我不愿分享的秘密