const adobeLogo = document.getElementById("adobe"); const noMore = document.getElementById("nomore"); const firstBook = document.querySelector(".bar1"); const thirdBook = document.querySelector(".bar3"); const infoInside = document.getElementById("note"); adobeLogo.addEventListener("mouseenter", function () { adobeLogo.style.display = "none"; noMore.style.display = "block"; }); noMore.addEventListener("mouseenter", function () { noMore.style.display = "none"; adobeLogo.style.display = "block"; }); firstBook.addEventListener("click", function () { adobeLogo.visibility = "hidden"; }); noMore.addEventListener("click", function () { noMore.style.display = "none"; noMore.style.display = "hidden"; adobeLogo.style.visibility = "visible"; }); thirdBook.addEventListener("mouseover", function () { thirdBook.style.visibility = "hidden"; //thirdBook.style.display="none"; infoInside.style.display = "block"; }); infoInside.addEventListener("mouseleave", function () { infoInside.style.display = "none"; //thirdBook.style.display = "block"; thirdBook.style.visibility = "visible"; }); thirdBook.addEventListener("click", function () { thirdBook.style.visibility = "hidden"; infoInside.style.display = "block"; }); infoInside.addEventListener("click", function () { infoInside.style.display = "none"; thirdBook.style.visibility = "visible"; });