鼠标的移入、移出事件

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

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

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

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

<div class="box" id="box">
	<div class="cont" id="cont">
		<p>你的手是我</p>
		<p>不能触及的倾城温暖，</p>
		<p>我的心是你</p>
		<p>不曾知晓的兵慌马乱。</p>
		<p>你可知道你是我不愿分享的秘密</p>
	</div>
</div>

（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、详细代码如下：

<style>
	*{
	padding：0px;
	margin：0px;
	}
	.box{
		width: 200px;
		height: 200px;
		margin: 100px auto;
		background: #E96365;
		background:url(./练习/img/微信图片_20181218224422.jpg)no-repeat;
		border: 5px solid #000;
		border-radius: 5px;
		
	}
	.box:hover .cont{
		animation: mingzi 5s linear 5s;
	}
	.cont{
		width: 200px;
		height:200px; 
		font-size: 14px;
		background: rgba(249,249,249,0.5);
		display: none;
		margin-top: -15px;
		transform: translateY(360deg);
	}
	.cont p{
		margin-top: 15px;
	}
	.cont p:nth-child(1){
		padding-top: 10px;
	}
	.cont p:nth-child(2){
		margin-left: 20px;
	}
	.cont p:nth-child(3){
		margin-left: 65px;
	}
	.cont p:nth-child(4){
		margin-left: 35px;
	}
	@keyframes mingzi{
		0%{
			background: url(animation/images/微信图片_20181218224422.jpg) no-repeat;
			background-size: 400px;
		}
		50%{
			background:url(./练习/img/微信图片_20181218224422.jpg)no-repeat;
			background-size: 400px;
		}
		100%{
			background: url(animation/images/微信图片_20181218224444.jpg)no-repeat;
			background-size: 400px;
		}
	}
</style>
<body>
<div class="box" id="box">
	<div class="cont" id="cont">
		<p>你的手是我</p>
		<p>不能触及的倾城温暖，</p>
		<p>我的心是你</p>
		<p>不曾知晓的兵慌马乱。</p>
		<p>你可知道你是我不愿分享的秘密</p>
	</div>
</div>

<script>
	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";
		};
	};
</script>
</body>

鼠标的移入、移出事件

猜你喜欢