CSS3：當子div可見時隱藏父div

初學者懷疑：當子div可見時，我想隱藏父div。 這可能與css有關嗎？也許使用z-index？CSS3：當子div可見時隱藏父div

另一件事，我可以用不同的CSS屬性格式化子div，或者他們需要是父級的相同的？謝謝！

<!doctype html> 
<style type="text/css"> 
#intro { 
width:100%; 
float:left; 
padding-top:3%; 
background-repeat:no-repeat; 
background-size:100%; 
position:relative; 
z-index:50; 
}  
.wrapper_intro { 
display:block; 
width:38%; 
margin: 7% 3% 3% 7%; 
float:right; 
color:black; 
padding:3% 3% 4% 3%; 
background-color:none; 
position:absolute; 
z-index:100; 
right: 0px; 
} 
.parent { 
display:block; 
font-size:5em; 
color:yellow; 
margin-top: 2%; 
margin-bottom:3%; 
text-align:center; 
z-index: 102; 
} 
.child { 
display:none; 
} 
.parent:hover .child { 
display:block; 
background-color: rgba(242, 218, 192, 0.9); 
margin-top:5%; 
color:black; 
text-align:center; 
z-index: 101; 
} 

</style>

 <div class="wrapper_intro"> 

       <div class="parent"> 
        <div>Ola!</div> 

        <div class="child">Lorem ipsum dolor sit  amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div> 
       </div>

來源

2015-04-26 David Monteiro

1.什麼意思是「隱藏父母div」前actly？當孩子的大小相同時，父母不可見（位於下層）。 2.當然，子元素可以有不同於paretn的樣式。任何屬性都是繼承的，只是設置如。默認值給兒童。 – panther

好的，也許我沒有使用正確的方法。我想把這個單詞放在一個div上，當我把它懸停時，這個單詞變得不可見，而另一個帶有文本的div被揭示出來。 –

你能給我看看它的外觀嗎？您想要懸停什麼div以及要顯示哪個div？一切都是可能的，但請告訴我它在默認狀態下的外觀，鼠標移動的元素以及懸停狀態的外觀。 – panther

當您隱藏父DIV，它裏面的所有元素也將得到隱藏。不明白你的情況。如果你想讓它們分開，不要將它們嵌套在一個div中。保持它們分開。

是的，父母和孩子的CSS可以不同。您可以使用！重要的是可以騎任何已用於父級的CSS。

來源

2015-04-26 11:39:05 Abhi

由於評論應該是很簡單，大約只需添加

.parent:hover > div:first-child {visibility: hidden}

http://jsfiddle.net/czd1z5jh/

什麼，或者，如果你想移動.child頂端：

.parent:hover > div:first-child {display: none}

http://jsfiddle.net/czd1z5jh/1/

來源

2015-04-26 12:27:37 panther

非常感謝！那就是訣竅。現在我試圖用！重要的方式將我的子div的字體大小更改爲1.5em，但我仍然無法更改它。如果我想在隱藏div的過程中進行更多的smoth轉換，有什麼建議嗎？我在我的.parent：hover> div上嘗試了-webkit-transition-delay：1s：first-child class，但沒有奏效 –

CSS3：當子div可見時隱藏父div

回答

相關問題