[作特效, 学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>
复制代码

专栏地图

[作特效, 学JS] -- 00 开篇
[作特效, 学JS] -- 01 超连接鼠标移入变大变红, 鼠标移除还原
[作特效, 学JS] -- 02 鼠标移入, div变大变红, 鼠标移出, 回复原貌
[作特效, 学JS] -- 03 网页换肤
[作特效, 学JS] -- 04 复选框全选
[作特效, 学JS] -- 05 复选框全选/全不选
[作特效, 学JS] -- 06 复选框全选/全不选/反选
[作特效, 学JS] -- 07 网页选项卡
[作特效, 学JS] -- 08 倒计时
[作特效, 学JS] -- 09 正经的全选和反选
[作特效, 学JS] -- 10 自动生成表格
[作特效, 学JS] -- 11 加餐-神奇的正则表达式
[作特效, 学JS] -- 12 加餐-DOM扩展
[作特效, 学JS] -- 13 加餐-聊聊BOM