二维码显示和隐藏
需求分析：
鼠标移入小盒子：显示大盒子，设置大盒子display属性为block
鼠标移出小盒子：隐藏大盒子，设置大盒子display属性为none
思路分析：事件三要素
1 获取元素：
2 注册事件：
3 事件处理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>事件案例 - 二维码显示与隐藏</title>
<style>
.parent {
position: fixed;
right: 0;
top: 40%;
width: 50px;
height: 50px;
background: url(./images/bgs.png) no-repeat -159px -51px;
cursor: pointer;
}
.son {
position: absolute;
right: 50px;
display: none;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<img src="./images/hmewm.jpg" alt="" />
</div>
</div>
</body>
<script>
// 获取元素
const parent = document.querySelector(".parent");
const son = document.querySelector(".son");
console.log(parent, son);
// 鼠标移入事件:鼠标移入小盒子,显示大图
parent.onmouseover = function () {
son.style.display = "block"; // 行内控制
};
// 鼠标移出事件
parent.onmouseout = function () {
// 隐藏大图
son.style.display = ""; // 行内控制取消:行外的生效(默认就是隐藏)
};
// 需求: 鼠标移入大盒子,小盒子显示; 移出,小盒子隐藏
// 核心技术点: display样式
// 总结
// 未来但凡涉及到显示与隐藏: 都是通过css的display控制
// 行内的优先级高于行外
</script>
</html>
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
