Javascript 悬停另一个div时隐藏div

所以我在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>

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

我想做的是： 我想在悬停翻转容器时隐藏文本“title”和img“1.png”

我该怎么做

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

谢谢你的帮助

---

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

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

或者，您可以使用

可见性：hidden

，因为这将保留文档流中的元素，而不是将它们全部删除。

OP

在这种情况下，我建议

visibility:hidden

over

display:none。下面是对这种方法的修改：

简而言之，
visibility:hidden
将真正地隐藏元素-仍然占用以前的空间，因此不会影响布局

相反，
显示：无使其无法渲染，因此它以前占用的空间现在无法解释。因此，悬停以显示/隐藏已设置为“显示：无”的元素很可能会导致一些不希望的闪烁。
悬停时通过设置“显示：无”隐藏文本和图像可能会导致父容器的闪烁和布局更改。因此，通过设置
可见性：hidden
使它们透明

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

我已经为你创造了

试试这个


.flip container:hover.text、.flip container:hover img{
可见性：隐藏；
}
此外，“可见性隐藏”也可以完美地工作。。实际解决内容移动位置时显示无所引起的问题