隐藏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>

描述：现在翻盖容器和脚蹼的使用，因为当我将鼠标悬停这个div我有一个CSS转换触发了翻转div。当内部div被点击时，href只允许打开一个带有说明的div 内部div是一个带有文本和图像的正方形。

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

我该怎么做？

我试图添加显示：隐藏到类文本，但它只适用于当我悬停实际文本，而不是当我悬停翻转容器背景时。

感谢您的帮助

如果可能的话我希望能有一个纯CSS的解决办法，如果还没有一个javascript的解决方案可以做到。

来源

2013-03-14 mstation

OP，

在这种情况下，我建议visibility:hidden了display:none;。这里有一个小提示：http://jsfiddle.net/wEr3T/1/。

总之，visibility:hidden将字面上只是隐藏元素（s） - 仍然占用它之前所做的空间，因此不影响布局。

与此相反，display:none;导致它不被渲染，因此它先前占用的空间现在未被记录下来。因此，悬停以显示/隐藏已设置为display:none的元素可能会导致一些不需要的闪烁。

来源

2013-03-14 21:31:26 couzzi

这应该做的伎俩：

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

或者，你可以使用visibility: hidden，因为这将保持元素的公文流转，而不是删除它们放在一起。

来源

2013-03-14 21:16:23 phenomnomnominal

谢谢你，这个完美！ – mstation 2013-03-14 21:52:30

隐藏文字和图像时悬停#flip-container通过设置display: none可能会导致父容器的布局闪烁和更改。所以请改为透明visibility: hidden。我们为您创建了jsFiddle。

来源

2013-03-14 21:32:09

还可见隐藏的作品完美..实际上解决了显示引起的问题无内容移动的位置 – mstation 2013-03-14 22:14:51

尝试......

.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-29 18:00:00

隐藏DIV徘徊另一格时

回答

相关问题