隱藏於：懸停，DIV上的DIV

我想實現的是隱藏頂部的DIV以便能夠訪問下面的DIV。

我試過不透明，但由於頂部DIV仍然存在，只是透明的，它不會讓我與下面的DIV的內容進行交互。我也試過顯示：無;可見度：隱藏;和z-索引。這些都不會起作用。

如何用CSS3實現這一點，所以我也可以使用一個轉換？

HTML：

<li class="panel-box"> 
    <div class="front box-style"> </div> 
    <div class="back"> </div> 
</div> </li>

CSS：

.panel-box { 
    margin: 5px; 
    padding: 0; 
    display: inline-block; 
    clear: none; 
    float: left; 
    width: 310px; 
    height: 200px; 
    position: relative; 
} 

.box-style { 
    background-color: red; 
} 

.front { 
    width: 310px; 
    height: 200px; 
    z-index: 5; 
    opacity: 0; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.front:hover { 
    opacity: 0; 
    display: none; 
} 

.back { 
    width: 310px; 
    height: 200px; 
    background-color: rgba(57, 54, 55, 0.95); 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 0; 
}

感謝一大堆。

來源

2013-08-20 Borsn

無論怎樣，單純的CSS將不提供針對舊版本瀏覽器的解決方案，尤其是IE直到最近只在'a'元素（鏈接）上接受僞類'：hover'。 – gersande

在這種情況下，你會推薦什麼？如果你不介意幫忙，我對HTML和CSS以外的其他東西不太瞭解。 – Borsn

[This]（http://geek.ryanhellyer.net/2009/12/10/ie-hovers/）和[this]（http://www.sidesofmarch.com/index.php/archive/2007/04）/23/an-ie6-compatible-solution-for-hover /）可能是足夠的：懸停兼容性解決方案，您可以查看 – gersande

我已經放在一起，似乎做了一些這樣的解決方法，但它可能會失敗悲慘的IE瀏覽器。

測試和工程合理地在Chrome ...因人而異:)

它使用的z-index和同胞選擇相結合，使前/後的div掉地的堆疊內容。

我不得不用前/後交換位置來使用CSS兄弟選擇器。我不認爲這是一個完美的例子，但也許它會讓想法流動。

基本上這裏發生了什麼是：

當鼠標進入 - 觸發.front:hover
前的z索引至-1觸發.back:hover
回的z-index立即轉到100保持它在堆棧的頂部
同級選擇器back：hover + front保持前端不透明度爲0
當鼠標轉換出來時，這一切都會逆轉

反向過渡不是很平滑 - 還沒有完全弄清楚，如果可以修復的話。

Demo

CSS

.panel-box { 
    margin: 5px; 
    padding: 0; 
    display: inline-block; 
    clear: none; 
    float: left; 
    width: 310px; 
    height: 200px; 
    position: relative; 
} 

.front { 
    width: 310px; 
    height: 200px; 
    padding: 10px; 
    z-index: 5; 
    opacity: 1; 
    display: block; 
    position: absolute; 
    background-color: red; 
    top: 0; 
    left: 0; 
    -webkit-transition: opacity .5s ease; 
} 

.front:hover { 
    opacity: 0; 
    z-index: -1; 
} 

.back { 
    width: 310px; 
    height: 200px; 
    padding: 10px; 
    color: white; 
    background-color: rgba(57, 54, 55, 0.95); 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 0; 
    opacity: 0; 
    -webkit-transition: opacity .5s ease; 
} 

.back:hover + .front { 
    opacity: 0; 
} 

.back:hover { 
    z-index: 100; 
    opacity: 1; 
}

HTML

<li class="panel-box"> 
    <div class="back">content goes here</div> 
    <div class="front box-style"></div> 
</li>

來源

2013-08-20 05:32:04 dc5

非常感謝！ – Borsn

隱藏於：懸停，DIV上的DIV

回答

相關問題