隱藏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徘徊另一格時

回答

相關問題