隐藏于：悬停，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

回答

相关问题