當懸停按鈕

沒有出現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

回答

相關問題