兩個div相互堆疊-底部div上的鏈接不可點擊

Question

我想要的是：在懸停時，一個圖塊分為兩個圖塊，然后兩個圖塊都作為單獨的鏈接工作。 磁貼也應在懸停時更改背景顏色。

為了實現這一點，我將兩個div（ toptile和bottomtile ）彼此疊放在一起。 懸停時， toptile變得不可見，並且可以看到bottomtile ，它包含兩個div，每個div都包含一個超鏈接。

<div class="tile">
    <div class="bottomtile">
        <div class="linktile"><a href="page1.php">ONE</a></div>
        <div class="linktile"><a href="page2.php">TWO</a></div>
    </div>
    <div class="toptile">HELLO</div>
</div>

CSS：

.tile{
    width: 200px;
    height: 200px;
    position: relative;
}

.bottomtile {
    position: absolute;
    width: 200px;
    height: 200px;
}

.toptile {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
}

.toptile:hover {
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}

.linktile{
    height: 95px;
    width: 200px;
    background-color: blue;
    top: 0;
    left: 0;
}

.linktile:hover{
    background-color: yellow;
}

不幸的是， .linktile:hover的背景更改或超鏈接均.linktile:hover 。 我可以看到單詞“ ONE”和“兩個”，但這就像我將鼠標懸停在一個空的div上一樣。 我的假設是toptile作用就像透明的玻璃平面，在其中我可以直視到bottomtile但實際上無法用鼠標觸及它。

我還嘗試了visibility: hidden和display: none .toptile:hover括號內display: none內容，但問題仍然存在。

有沒有辦法使懸停時地勢完全消失？ 還是解決這個問題的另一種方法？

Answer 1

在.tile而不是.toptile上使用:hover

.tile:hover .toptile{
  /* your code to hide .toptile */
}

您的假設是正確的。 它位於.bottomtile頂部，因此您無法與.bottomtile交互。 而且，如果您完全讓.toptile消失，那么您的鼠標就不會在上面徘徊。

Answer 2

這是因為您聲明了這一點

.toptile:hover {
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}

因為您使用的是opacity: 0 ，它看起來好像不再存在了，但是事實是.toptile仍然存在，但是不可見，所以您真正徘徊的仍然是.toptile而不是.linktile ，這就是.linktile的background從未改變的原因。 您需要使用display: none ，而且.toptile也不是.bottomtile的父.bottomtile ，因此，當.toptile消失時，它將不再懸停在它上面，因此它將重新出現並再次消失，因此您需要將選擇器更改為.tile:hover .toptile ，這是更改后的css應該是

.tile:hover .toptile {
    display: none;
}

這是工作中的小提琴

Answer 3

盧德帶你去。 這是這個想法的有效筆，其中一些不必要的標記消失了。

http://codepen.io/justindunham/pen/sCzcH

.bottomtile .linktile {
  opacity: 0;
}

.bottomtile:hover .linktile {
  opacity: 1;
}