一个放大镜，一个叉叉，默认叉叉不出现（透明度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") })
让两个图片能够重叠起来.nav-btn-container { display: flex; position: relative; } .nav-btn-container img { position: absolute; }