懸停另一個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>