CSS：他の要素をホバリングしている間にヘッダーの高さを変更します

Question

ヘッダーのdivにカーソルを合わせている間にヘッダーの高さを変更しようとしています。 divはドロップダウンボタンであり、ヘッダーはドロップダウンコンテンツに合わせて特定のピクセル数を拡大することになっています。

HTML：

<header> 
    <nav class="menyer"> 
     <div class="dropdown"> 
      <button class="dropbtn">Dropdown</button> 
       <div class="dropdown-content"> 
        <a href="#">Link 1</a> 
        <a href="#">Link 2</a> 
        <a href="#">Link 3</a> 
       </div> 
     </div> 
    </nav> 
</header> 

あなたはすべてのソースコードhere

Answer 1

子要素の上にマウスを移動しているときは、要素の高さを変更することはできませんを見つけることができます。あなたができることは、内側の要素の高さを拡大して外側の要素がそれに応じて伸びるようにすることだけです。ベース要素には一定の高さ（自分のヘッダ）

基本的な例が存在しない場合にのみ動作します：

<header> <ul> <li>Item 1</li> <li> Item 2 </li> </ul> </header> 

CSS：あなたが上にマウスを移動場合

li{display:block;height: 30px;} 
li:hover{height: 50px;} 
header{background-color:red} 

そのようにヘッダが拡張li要素。ヘッダーの最小高さが必要な場合（デザインのために...）、ヘッダーの最小高さを設定します。