悬停另一个div时隐藏div

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。 当单击内部div时，href只是允许打开一个带说明的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

通过设置display: none鼠标悬停在#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>