当悬停按钮

没有出现CSS转换面板通过下面的简单代码我想运行转换在CSS。一旦你将鼠标悬停在<button>上，应该会出现<panel>。但是，目前，当我将鼠标悬停在<button>上时，<panel>项目根本没有出现，我在代码中找不到问题。当悬停按钮

你是否看到我的代码中的错误，为什么转换不起作用？

您也可以找到我的代码here

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; 
 
}

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

来源

2017-08-25 Michi

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

.button:hover + .panel有窍门。

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; 
 
}

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

来源

2017-08-25 09:29:18 Gerard

嗨杰拉德，感谢您的帮助，并与兄弟姐妹和孩子的关系之间的差异的提示。我也在这里更新了代码https://jsfiddle.net/kyva8mhe/7/ – Michi

@Michi祝你的项目好运！ – Gerard

此外，我将菜单更改为一个版本，其中面板是按钮的子项，高度是相对（％）：https：//jsfiddle.net/kyva8mhe/16/ – Michi

请检查此代码，我希望你能得到你的答案。

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; 
 
}

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

来源

2017-08-25 09:45:31

回答

相关问题