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

Question

我想要的是：在懸停時，一個tile分成兩個tile，兩個tile然後作爲單獨的鏈接工作。在懸停時，瓷磚也應該改變背景顏色。

爲了達到這個目的，我將兩個div（toptile和bottomtile）堆疊在一起。在懸停時，toptile不可見，您可以看到bottomtile，其中包含兩個包含超鏈接的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背景的變化，也不是超鏈接工作。我可以看到「ONE」和「TWO」這兩個字，但它就像是我在空白區域盤旋。我的假設是，toptile就像一個透明的玻璃飛機，我可以看到bottomtile但實際上並沒有用我的鼠標達到它。

我也試過visibility: hidden和display: none括號裏面的.toptile:hover但問題保持不變。

有沒有辦法使toptile在懸停時完全消失？或者以另一種方式解決這個問題？

Answer 1

那是因爲你宣佈這個

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

因爲你使用opacity: 0，它只是看起來像它已不再存在，但事實是.toptile仍然存在，但無形的，所以你」真的徘徊仍然是.toptile而不是.linktile，這就是爲什麼background的.linktile從未改變。你需要的是使用display: none，並且.toptile也不是.bottomtile的父親，所以當.toptile消失時，它不會再懸停在它上面，所以它會再次出現並消失，所以您需要更改選擇到.tile:hover .toptile，這裏的變化css應該

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

這裏的工作Fiddle

Answer 2

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

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

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

Answer 3

Luud越來越你。這是一個想法的工作筆，一些不需要的標記消失了。

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

.bottomtile .linktile { 
    opacity: 0; 
} 

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