阿毛Alex - 2021年5月30日
type: channel
link: https://alexmao.com/index.php/2021/05/30/
description: 生命不息，折腾不止
items: JS控制两个元素样式的切换
items: CSS让两个图片重叠

JS控制两个元素样式的切换
type: item
date: 2021-05-30T14:32:00+00:00
description: 一个放大镜，一个叉叉，默认叉叉不出现（透明度0），点击按钮，出现叉叉，放大镜透明度变成0.还要把pointer-events设置成none，还要做一个动画效果。HTML部分： CSS部分：.nav-btn-container { display: flex; position: relative; } .nav-btn-container img { position: absolute; } .nav-btn-container .close-btn { opacity: 0; pointer-events: none; transform: translateY(-8px); transition: 300ms; } .nav-btn-container .search-btn { pointer-events: auto; transition: 300ms; } .nav-btn-container.active .search-btn { opacity: 0; pointer-events: none; transform: translateY(-8px); } .nav-btn-container.active .close-btn { opacity: 1; pointer-events: auto; transform: translateY(0); } JS部分：const navBtnContainer = document.querySelector(".nav-btn-container") const closeBtn = document.querySelector(".close-btn") const searchBtn = document.querySelector(".search-btn") searchBtn.addEventListener("click", () => { searchBox.classList.add("active") navBtnContainer.classList.add("active") }) closeBtn.addEventListener("click", () => { searchBox.classList.remove("active") navBtnContainer.classList.remove("active") })

CSS让两个图片重叠
type: item
date: 2021-05-30T01:17:00+00:00
description: 让两个图片能够重叠起来.nav-btn-container { display: flex; position: relative; } .nav-btn-container img { position: absolute; }