[做特效, 学JS] -- 02 鼠标移入, div变大变红, 鼠标移出, 恢复原貌

猫哥的技术博客
1,035 阅读1分钟

效果是酱婶儿的...

原始代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#div1{
			width: 200px;
			height: 200px;
			background-color: grey;
			position: absolute;
			z-index: 20;
		}
		#div2{
			width: 300px;
			height: 300px;
			background-color: red;
			position: absolute;
			display:none;
		}
	</style>
</head>
<body>
	<div id="div1" onmouseover="overSmall()" ></div>
	<div id="div2" onmouseout="outBig()"></div>
</body>
<script>
	var small = document.getElementById('div1');
	var big = document.getElementById('div2');

	function overSmall() {
		small.style.display = "none";
		big.style.display = "block";
	}
	function outBig() {
		big.style.display = "none";
		small.style.display = "block";
	}

</script>
</html>

专栏地图

avatar
文章
阅读
粉丝