我在另一个 DIV 之上有一个 DIV。
我想实现的是将DIV隐藏在最上面,以便能够访问下面的DIV。
我试过不透明度,但由于顶部 DIV 仍然存在,只是透明的,它不允许我与下面的 DIV 的内容进行交互。 我也试过 display:none;, visibility: hidden;和 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;
}
非常感谢。
最佳答案
我已经整理了一些解决方法,似乎可以解决其中的一些问题,但它可能会在 IE 上失败。
在 Chrome 上测试并正常工作...... YMMV :)
它结合使用了 z-index
和兄弟选择器来允许前/后 div 在堆叠上下文中交换位置。
我必须交换前面/后面的位置才能使用 CSS 兄弟选择器。我并不是说这是一个完美的例子,但也许它会让想法流动起来。
基本上这里发生的是:
- 当鼠标进入时 - 触发
.front:hover
- front z-index 变为 -1 触发
.back:hover
- back z-index 立即变为 100 并保持在堆栈顶部
- 兄弟选择器 back:hover + front 保持前面的不透明度为 0
- 当鼠标移出时,这一切都反转
反向过渡不是很顺利 - 还没有完全弄清楚是否可以解决这个问题。
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>
关于css - 在 DIV 上隐藏 :hover, DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18325796/