隐藏在 :hover, DIV over DIV答案

【问题标题】：Hide on :hover, DIV over DIV隐藏在 :hover, DIV over DIV
【发布时间】：2013-08-21 22:59:27
【问题描述】：

我在另一个 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;
}

非常感谢。

【问题讨论】：

无论如何，css 本身不会为旧浏览器提供解决方案，尤其是 IE，它直到最近才接受 a 元素（链接）上的伪类 :hover。
在这种情况下，你会推荐什么？如果你不介意帮忙的话，我除了 HTML 和 CSS 之外什么都不会？
This 和 this 可能就足够了：您可以查看的悬停兼容性解决方案
另外this page 讨论了透明度、IE 和 css，并且可能有一些对您有用的信息。我实际上正在查找 div/opacity 并且我认为 CSS 中不会有符合您的标准的解决方案，至少据我所知不是......谷歌搜索仍在继续......
：悬停兼容性也在这里解决：stackoverflow.com/questions/2571073/ie6-hover-issue

标签： css animation html

【解决方案1】：

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

在 Chrome 上经过测试并且可以正常工作……YMMV :)

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

我不得不用前/后交换位置来使用 CSS 同级选择器。我并不认为这是一个完美的例子，但也许它会激发灵感。

基本上这里发生的事情是：

当鼠标进入时 - 触发.front:hover
前 z-index 变为 -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>

【讨论】：