[作特效, 學JS] -- 02 鼠標移入, div變大變紅, 鼠標移出, 恢復原貌

時間 2019-11-17

標籤特效鼠標移入 div 變大變紅移出恢復原貌欄目 JavaScript 简体版

原文原文鏈接

效果是醬嬸兒的...

原始代碼

<!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>
複製代碼