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元素上，标题会扩展。如果您的标题需要最小高度（因为设计，...），然后设置标题的最小高度。

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

1 个答案: