1

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

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

我怎样才能做到这一点？

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

谢谢您的帮助

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

4

4 回答 4

2

这应该可以解决问题：

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

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

于 2013-03-14T21:16:23.270 回答
0

操作，

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

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

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

于 2013-03-14T21:31:26.000 回答
0

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

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

我为你创建了jsFiddle。

于 2013-03-14T21:32:09.910 回答
0

试试这个...

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

于 2017-11-29T18:00:00.800 回答