html中关于下拉框的2中设置方法（移入显示下拉框）

原创已于 2022-07-05 19:11:47 修改 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #javascript

于 2022-07-05 19:01:06 首次发布

html 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了在HTML中实现下拉框显示的两种方法：通过设置高度变化和利用CSS的display属性切换显示状态。详细展示了相关CSS代码实现下拉框在鼠标悬停时显示的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方式（设置高度的不同来实现）

首先我们设置一个盒子来装我们的下拉框和内容

<div class="box1">小米

</div>

然后我们对已有的盒子先设置个背景色让他更明显

.box1{

height: 20px;

width: 100px;

background-color: orange;

}

最后我们设置下拉出现的框（<div class="xiala"></div>）

.xiala{

width: 100px;

height: 0px;

}

.box1:hover>.xiala{

height: 100px;

background-color: red;

}

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            height: 20px;
            width: 100px;
            background-color: orange;
        }
        .xiala{
            width: 100px;
            height: 0px;
        }
        .box1:hover>.xiala{
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">小米
        <div class="xiala"></div>
    </div>
</body>
</html>