為什么這個HTML / CSS沒有做我想要的

Question

這是制作電話菜單的腳本。 懸停在#menu_button上時，需要出現#menu。 但是什么也沒發生。 我怎樣才能解決這個問題？

隨意提出改進我的代碼的建議，我是html和css的入門者。

 * { margin: 0; padding: 0; } #menu { height: 100%; width: 100%; background-color: skyblue; display: none; } #header { background-color: lightblue; width: 100%; height: 60px; top: 0; left: 0; right: 0; position: fixed; } #menu_button { float: left; width: 60px; height: 60px; background-image: url(img/menu_button.png); background-size: 60px 60px; } #menu_button:hover #menu { display: block; }

 <html> <body> <div id="header"> <div id="menu_button"> </div> </div> <div id="menu"> </div> </body> </html>

Answer 1

正如Paulie_D所說，將元素懸停在元素A上時，不能將其定位為目標，除非它是子元素或同級元素。 一種解決方案是在兩個元素上都放一個包裝，然后將鼠標懸停在＃menu-button上時，使用同級選擇器>定位#menu。

有關示例，請參見此JSBin ，該示例略有不同。

#menu-button:hover #menu { ... }編寫方式是選擇一個具有ID為menu的元素，該元素位於另一個具有id menu-button元素內

Answer 2

盡管您的標記中未提及JavaScript / jQuery，但我在這里創建了一個小提琴，可以在jQuery中為您完成此操作： https : //jsfiddle.net/7g80vgv9/

CSS（在此示例中略作修改）：

* {
    margin: 0;
    padding: 0;
}
#menu {
    height: 500px;
    width: 200px;
    background-color: skyblue;
    display: none;

}
.show {
    display: block !important;
}
#header {
    background-color: lightblue;
    width: 100%;
    height: 60px;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;

}
#menu_button {
    float: left;
    width: 60px;
    height: 60px;
    background-color: black;
    background-size: 60px 60px;

}

HTML（未更改）：

 <body>
        <div id="header">
            <div id="menu_button">
            </div>
        </div>

        <div id="menu">
        </div>
    </body>

jQuery的：

$("#menu_button").hover(function() {
   $("#menu").toggleClass("show");
});

如您所見，我創建了一個名為show的新CSS類，該類將覆蓋display: none默認情況下， #menu上沒有display: block !important 。

然后，jQuery通過檢測用戶何時將#menu_button懸停在#menu_button並執行代碼（在本例中是添加/刪除（切換） #menu按鈕的show類）來達到#menu 。

為什么這個HTML / CSS沒有做我想要的

問題描述

2 個解決方案

解決方案1
1 已采納 2015-11-25 16:00:21

解決方案2
0 2015-11-25 16:45:35

為什么這個HTML / CSS沒有做我想要的

問題描述

2 個解決方案

解決方案1 1 已采納 2015-11-25 16:00:21

解決方案2 0 2015-11-25 16:45:35

解決方案1
1 已采納 2015-11-25 16:00:21

解決方案2
0 2015-11-25 16:45:35