悬停按钮时不显示CSS转换面板

Question

使用下面的简单代码，我想在 CSS 中运行转换。将鼠标悬停在<button>之后，应显示<panel>。但是，目前当我将鼠标悬停在<button> <panel>项目时根本没有出现，我在代码中找不到该问题。

您是否看到我的代码中的错误导致转换无效？

您还可以找到我的代码here

＆＃13;

＆＃13;

html { 
height: 100%; 
}

body { 
height: 100%; 
}

.button {
  height: 10%;
  width: 70%;
  float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: orange;
}

.panel {
  height: 30%;
  width: 70%;
  float: left;
  
  overflow: hidden;
  max-height:0px;
  transition: max-height .5s linear;
  
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: blue;
}

.button:hover .panel {
  max-height: 300px;
}

.panel div {
  height: 25%;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

＆＃13;

<div class="button">Menu</div>	
    
<div class="panel">
  <div> 1.0 Menu </div>
  <div> 2.0 Menu </div>
  <div> 3.0 Menu </div>
  <div> 4.0 Menu </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的CSS中有错误。 .button:hover .panel表示.panel是按钮div的子项。但是，这是一个兄弟姐妹。因此，您需要使用相邻的兄弟选择器（+）。

.button:hover + .panel可以解决问题。

＆＃13;

＆＃13;

html { 
height: 100%; 
}

body { 
height: 100%; 
}

.button {
  height: 10%;
  width: 70%;
  float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: orange;
}

.panel {
  height: 30%;
  width: 70%;
  float: left;
  
  overflow: hidden;
  max-height:0;
  transition: max-height .5s linear;
  
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: blue;
}

.button:hover + .panel {
  max-height: 300px;
}

.panel div {
  height: 25%;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

＆＃13;

<div class="button">Menu</div>	
    
<div class="panel">
  <div> 1.0 Menu </div>
  <div> 2.0 Menu </div>
  <div> 3.0 Menu </div>
  <div> 4.0 Menu </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请查看此代码，希望您能得到答案。

＆＃13;

＆＃13;

html { 
height: 100%; 
}

body { 
height: 100%; 
}

.button {
  height: 10%;
  width: 70%;
  float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: orange;
}

.panel {
  height: 30%;
  width: 70%;
  float: left;
  
  overflow: hidden;
  max-height:0px;
  transition: max-height .5s linear;
  
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: blue;
}

.button:hover, .panel:hover {
  max-height: 300px;
}

.panel div {
  height: 25%;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

＆＃13;

<div class="button">Menu</div>	
    
<div class="panel">
  <div> 1.0 Menu </div>
  <div> 2.0 Menu </div>
  <div> 3.0 Menu </div>
  <div> 4.0 Menu </div>
</div>

＆＃13;

＆＃13;

＆＃13;