Question

我在另一个DIV之上有一个DIV。

我想要实现的是将DIV隐藏在顶部以便能够访问下面的DIV。

我尝试过不透明度，但由于顶级DIV仍然存在，只是透明，它不允许我与下面的DIV内容进行交互。我也尝试过display：none;，visibility：hidden;和z-index。这些都不会奏效。

如何使用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;
}

非常感谢。

Answer 1

我已经整理了一些似乎可以做到这一点的解决方法，但它可能会在IE上失败。

在Chrome上测试并合理运行... YMMV：）

它使用z-index和兄弟选择器的组合来允许前/后div在堆叠上下文中交换位置。

我不得不用前/后交换位置来使用CSS同级选择器。我不是说这是一个完美的例子，但也许它会让想法流动起来。

基本上这里发生的是：

当鼠标进入时 - 触发.front:hover
前面的z-index转到-1触发.back:hover
返回z-index立即转到100，将其保持在堆栈顶部
兄弟选择器后退：悬停+前方将前方不透明度保持为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>

隐藏：悬停，DIV超过DIV

1 个答案: