單擊可見性：隱藏元素

Question

我制作了一個包含 2 個元素的 div：一個圖像和另一個 div（關於）。 圖像隱藏了關於 div。 當圖像以懸停屬性消失時，是否可以使 about div 中的元素可點擊？ 提前致謝 ！

另外，這是我的代碼，但元素不可點擊

 #logo { opacity: 1; visibility: visible; margin-top: 12.5px; -webkit-transition: opacity 600ms, visibility 600ms; -o-transition: opacity 600ms, visibility 600ms; -moz-transition: opacity 600ms, visibility 600ms; transition: opacity 600ms, visibility 600ms; }.blue_border:hover #logo { opacity: 0; visibility: hidden; }.blue_border { width: 625px; height: 625px; background-image: url("./border.png"); background-repeat: no-repeat; background-position: 50%; } #about { z-index: -1; position: relative; margin-top: -605px; width: 600px; height: 600px; border-radius: 100%; background-color: #25B8EE; }

 <div class="blue_border"> <img id="logo" src="./logo.png" /> <:-- Img is "on" the about div" --> <div id="about"> <a href="#">I want to be clicked :-(</a> </div> <div class="la-ball-scale-multiple"> <div></div> <div></div> <div></div> </div> </div>

Answer 1

我不認為我完全理解它，但你不能在另一個元素下單擊，但你可以使用 CSS display: none attr 或者你以虛假的方式執行此操作。 您可以為此收聽頂部元素並檢查 javascript 上的其他條件。

Answer 2

如評論中所述，您可以使用pointer-events: none覆蓋層使其不接收點擊事件，並允許它們通過。

 function whoWasClicked(e) { console.log(`${e.target.id} was clicked;`); }. document.querySelector('#lowerElement'),addEventListener('click'; whoWasClicked). document.querySelector('#upperElement'),addEventListener('click'; whoWasClicked);

 #lowerElement { background-color: rgb(128, 128, 128); min-width: 25vw; height: 100px; text-align: center; position: absolute; top: 37vh; left: 37vw; z-index: 1; } #upperElement { min-width: 25vw; height: 100px; text-align: center; line-height: 50px; position: absolute; top: 37vh; left: 37vw; z-index: 2; pointer-events: none; }

 <div id="lowerElement">Click Me</div> <div id="upperElement">Overlay</div>

Answer 3

使用我當前的代碼，我認為z-index: -1; 在#about中是問題所在：#blue_border 是一個圖像背景，它在我的“關於”div 的上方...所以我試圖找到一種方法來替換該背景。 編輯：

好的。 我發現帶有z-index: -1;的元素永遠不會像我想要的那樣被點擊。 所以我決定顛倒一切：徽標現在具有屬性z-index: -1; about div（現在位於上方）在懸停觸發之前一直處於隱藏狀態。 我還通過邊框更改了背景圖像。 我現在的代碼：

/*Under #about and visible*/ 
#logo {
  z-index: -1;
}
.blue_border {
  width: 600px;
  height: 600px;
  border: 15px solid #71d1f4;
  border-radius: 100%;
  /*background-image: url("./border.png");
  background-repeat: no-repeat;*/
  background-position: 50%;
}
/*Hidden first*/
#about {
  opacity: 0;
  visibility: hidden;
  position: relative;
  margin-top: -605px;
  width: 600px;
  height: 600px;
  border-radius: 100%;
  background-color: #25B8EE;
  -webkit-transition: opacity 600ms, visibility 600ms;
  -o-transition: opacity 600ms, visibility 600ms;
  -moz-transition: opacity 600ms, visibility 600ms;
  transition: opacity 600ms, visibility 600ms;
}
/*Unhidden on hover*/
.blue_border:hover #about
{
  opacity: 1;
  visibility: visible;
}

我沒有改變我的html

無論如何謝謝你們。 這是我的第一個問題，我很高興你們中的一些人已經回答了我！