为什么当我将鼠标悬停在图标栏上时，悬停不起作用？ [复制]答案

【问题标题】：why hovering doesn't work when i hover on icon bar? [duplicate]为什么当我将鼠标悬停在图标栏上时，悬停不起作用？ [复制]
【发布时间】：2021-01-03 04:48:28
【问题描述】：

当我将鼠标悬停在菜单图标上时，我想获得三个按钮 Home News 和 About，当我使用 .drop-down:hover .btn-content{ display: block; } 时，我什么也得不到。这是我的html：

    <div class="flex-cont first-row-100px   ">
         <div class="drop-down "> 
            <div class="bar-dis"> <i class="fa fa-bars fa-4x red-bar" aria-hidden="true"></i></div>

         </div> 
    </div>

    <div class="btn-content">
        <div class="black_lay"><input type="button" value="Home" class="btn1-width1 btn-all"></div>
        <div class="black_lay"><input type="button" value="News" class="btn-all"></div>
        <div class="black_lay"><input type="button" value="About" class="btn-all"></div>
    </div>

这是我的 CSS：

.flex-cont{
    display: flex; 
}

.first-row-100px{
    height: 70px;
    padding-left: 50%;
    background-color: rgb(59, 56, 56);
}
.bar-dis{
    background-color: rgb(59, 56, 56);
    border:  rgb(59, 56, 56); 
}

.red-bar{
    
    color: red;
    
}
.drop-down{
    position: relative;
    
}



.btn-all{
    background-color: rgb(59, 56, 56);
    color: white;
    border: rgb(59, 56, 56);
    padding-bottom: 30px; 
}

.btn-content{
    display: none;
    width: 100%;

}
.black_lay{
    padding-left: 50%;
    background-color: brown;
}

.drop-down:hover .btn-content{
    display: block;
}

当我将鼠标悬停在图标栏上时，结果必须如下所示；不关心颜色和一、二和额外的行！

我该如何解决这个问题？

【问题讨论】：

标签： html css hover

【解决方案1】：

.drop-down:hover .btn-content{ display: block; }

意味着.btn-content 在.drop-down 内部，这当然不会出现在您的代码中。尝试更改您的 html 以使此规则为真，或将这 2 个元素包含在同一父级中并将您的 css 规则更改为：

.drop-down:hover ~ .btn-content{ display: block; }

在此处阅读 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors 了解 CSS 选择器。

【讨论】：