CSS: ändern Sie die Höhe des Headers, während Sie auf einem anderen Element schweben

Question

Ich versuche, die Höhe des Headers zu ändern, während ich über ein div in der Kopfzeile schwebe. Das div ist eine Dropdown-Schaltfläche und die Überschrift soll eine bestimmte Anzahl von Pixeln erweitern, damit sie in den Drop-Down-Inhalt passen.

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> 

Sie können alle Source-Code finden here

Answer 1

Sie können nicht die Höhe eines Elements ändern, während über ein Kind Element schwebt. Alles, was Sie tun können, ist, die Höhe des inneren Elements zu erweitern, sodass sich das äußere Element entsprechend dehnt. Das funktioniert nur, wenn es keine feste Höhe auf dem Basiselement (Ihr Header)

einfaches Beispiel:

<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} 

diese Weise wird der Header erstreckt, wenn Sie über schweben ein li-Element. Wenn Sie eine Mindesthöhe benötigen, damit Ihre Kopfzeile funktioniert (aufgrund des Designs ...), legen Sie eine Mindesthöhe für die Kopfzeile fest.