Question

所以我在这个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是一个带有文本和图像的正方形。

我想做什么：当我将翻盖容器悬停时，我想隐藏文字“title”和img“1.png”。

我该怎么做？

我试图在课堂文字中添加display：hidden但它只在我悬停实际文本时才有效，而不是在我将鼠标悬停在翻盖背景上时。

感谢您的帮助

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

Answer 1

这应该可以解决问题：

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

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

Answer 2

OP，

在这种情况下，我建议visibility:hidden超过display:none;。这是这种方法的小提琴：http://jsfiddle.net/wEr3T/1/。

简而言之，visibility:hidden字面上只是隐藏元素 - 仍然占用之前所做的空间，因此不会影响布局。

相比之下，display:none;导致它不被渲染，因此它先前占用的空间现在是不计算的。因此，将鼠标悬停以显示/隐藏已设置为display:none的元素可能会导致某些意外的闪烁。

Answer 3

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

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

我为你创建了jsFiddle。

Answer 4

试试这个......

.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>

当悬停另一个div时隐藏div

4 个答案: