調整div懸停

Question

我看到這個視頻，但它似乎不工作。 我需要調整div高度from 200px to 250px然後在第一個裏面設置visibility: visible; div。 https://www.youtube.com/watch?v=Wb7TmUR5JJw

它不適用於我有沒有沒有jQuery的選項嗎？

代碼：

#album:hover{ 

    height: 250px; 
    width: 250px; 
    transition: All 1s ease-in-out; 

} 

Answer 1

你可以試試這個。 懸停你的外部div將會更大，內部div會出現。爲了獲得更好的效果，請不要懸停在課堂上。

HTML

<div class="outer"> 
    <div class="inner"> 
    </div> 
</div> 

CSS

div.outer { 
    width: 200px; 
    height: 200px; 
    background: orange; 
    transition: all 0.5s ease; 
} 
div.outer:hover { 
    width: 250px; 
    height: 250px; 
} 
div.inner { 
    height: 50px; 
    width: 50px; 
    background: red; 
    opacity: 0; //only for better effect 
    visibility: hidden; 
    transition: all 0.5s ease; 
} 
div.outer:hover .inner { 
    visibility: initial; 
    opacity: 1; 
}