CSS：悬停在其他元素上时更改 header 高度

Question

我正在尝试更改 header 的高度，同时我将鼠标悬停在 header 中的 div 上。 div 是一个下拉按钮，header 应该扩展特定数量的像素以适应下降 down-content。

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

将鼠标悬停在 child-element 上时无法更改元素的高度。您所能做的就是扩大内部元素的高度，以便外部元素相应地伸展。仅当 base-element（您的 header）

上没有固定高度时才有效

基本示例：

<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 元素上，header 就会扩展。如果您的 header 需要最小高度才能工作（由于设计原因，...），请为 header 设置一个 min-height。

CSS：悬停在其他元素上时更改 header 高度

CSS: change header height while hovering on other element

css

height

element

header

hover