悬停另一个 div 时隐藏 div答案

【问题标题】：Hide div when hovering another div悬停另一个 div 时隐藏 div
【发布时间】：2013-03-03 10:54:36
【问题描述】：

所以我在这样的 div 中有几个 div：

  <div class="flip-container">
        <div class="flipper">
            <a href="#" data-reveal-id="pc1">
                <div class="inner" style="background-color:#ea6524;">
                    <p class="text">title</p>
                    <img src="1.png" class="img" />
                </div>
            </a>
        </div>
   </div>

说明：现在使用翻转容器和翻转器，因为当我悬停这个 div 时，我触发了一个 css 转换，它翻转了 div。 href 只允许在单击内部 div 时打开带有描述的 div 内部 div 是一个正方形，里面有一个文本和一个图像。

我想做什么：当我悬停翻转容器时，我想隐藏文本“标题”和 img“1.png”。

我该怎么做？

我尝试将 display:hidden 添加到类文本，但它仅在我悬停实际文本时有效，而不是在我悬停翻转容器背景时有效。

感谢您的帮助

如果可能的话，我更喜欢纯 css 解决方案，如果不是 javascript 解决方案也可以。

【问题讨论】：

标签： javascript css html hover hidden

【解决方案1】：

试试这个...

.flip-container:hover .text, .flip-container:hover img {
    visibility: hidden;
}

 <div class="flip-container">
        <div class="flipper">
            <a href="#" data-reveal-id="pc1">
                <div class="inner" style="background-color:yellow;">
                    <p class="text" style="color:red">title</p>
                    <img src="//placehold.it/100x100" class="img" />
                </div>
            </a>
        </div>
   </div>

【讨论】：

【解决方案2】：

这应该可以解决问题：

.flip-container:hover .text, .flip-container:hover img {
    display: none;
}

或者，您可以使用visibility: hidden，因为这会将元素保留在文档流中，而不是一起删除它们。

【讨论】：

【解决方案3】：

在悬停#flip-container 时通过设置display: none 隐藏文本和图像可能会导致闪烁和更改父容器的布局。所以改为通过设置visibility: hidden 使它们透明。

.flip-container:hover img {
visibility:hidden
}
.flip-container:hover .text {
visibility:hidden
}

我已经为你创建了jsFiddle。

【讨论】：

可见性隐藏也可以完美地工作..实际上解决了由于内容移动位置而导致的显示无问题

【解决方案4】：

OP，

在这种情况下，我建议使用visibility:hidden 而不是display:none;。这是这种方法的一个小技巧：http://jsfiddle.net/wEr3T/1/。

简而言之，visibility:hidden 将真正只是隐藏元素——仍然占用它之前的空间，因此不会影响布局。

相比之下，display:none; 导致它不被渲染，因此它之前占用的空间现在下落不明。因此，悬停以显示/隐藏已设置为 display:none 的元素可能会导致一些不希望的闪烁。

【讨论】：