CSS 水平菜单不起作用

Question

我的 css 菜单有问题。它不起作用.... 我想将鼠标悬停在按钮上，以切换另一个元素的显示属性。

我使用 CSS3 网格系统。不知道是不是这个问题？首先，这是我的代码：首先是 css 部分（仅受影响的部分）：

.navigation{
        grid-column: 1;
        grid-row: 2 / 3;
        justify-items: end;
        justify-self: end;
        
        width: auto;
        margin: 0;
        padding: 0;
        
        background-color: rgba(0,0,0,0.7);
        
        display: grid;
        grid-template-columns: 1;
        grid-template-rows: 50px 50px;
    }
    
    .navigationButton-icon{
        display: none;
        background-color: white;
        border: 2px solid;
        border-color: deepskyblue;
        border-radius: 10px;
        cursor: pointer;
        
        margin-top: 5px;
        padding-left: 50px;
        padding-right: 50px;
    }
    
    .navigation #butInsert{
        grid-column: 1;
        grid-row: 1 / 2;
        justify-self: start;
        width: 100%;
    }
    
    .navigation #butCreate{
        grid-column: 1;
        grid-row: 2 / 3;
        justify-self: start;
        width: 100%;
    }
    
    #butMenu:hover .navigationButton-icon{
        display: block;
    }

 
        <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Surveys</title>
            
            <link rel="stylesheet" type="text/css" href="styles/inline.css">
            <link rel="stylesheet" type="text/css" href="styles/fontello.css">
            <link href="https://fonts.googleapis.com/css?family=Nunito:300,400" rel="stylesheet">        
        </head>
        <body>
            <container class="container">
    
            <header class="header">
                <h1 class="headerTitle">Surveys</h1>
                <div class="headerButton">
                    <button id="butRefresh" class="headerButton-icon"><i class="icon-arrows-cw"></i></button>
                    <button id="butMenu" class="headerButton-icon"><i class="icon-th-list"></i></button>
                </div>
            </header>
    
            <main class="main">
                <?php include('snippets/survey.php'); ?>
            </main>
    
            <navigation class="navigation">
                    <button id="butInsert" class="navigationButton-icon">Insert</button>
                    <button id="butCreate" class="navigationButton-icon">Create</button>
            </navigation>
    
            <footer class="footer">
                <a class="impressum">IMPRESSUM</a>
            </footer>
    
            <div class="loader" hidden>
            </div>
    
            </container>
    
            <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
            <script src="scripts/app.js" async></script>
        </body>
    </html>

希望你能帮助我。我现在试了 3 个小时.. 我可以操作悬停元素的属性，但它不适用于 dom.

的其他元素

问候

Answer 1

CSS 不是这样的。 #butMenu:hover .navigationButton-icon 表示 #butMenu 必须是 .navigationButton-icon 元素的祖先。

你需要JavaScript.

// jQuery
$('#butMenu').hover(
    function () {
        $('.navigation').addClass('butMenu-hover');
    }, function () {
        $('.navigation').removeClass('butMenu-hover');
    }
);

// Vanilla JS
(function () {
    var butMenu = document.getElementById('butMenu');
    var navigation = document.getElementsByClassName('navigation')[0];
    butMenu.onmouseenter = function () {
        navigation.classList.add('butMenu-hover');
    };
    butMenu.onmouseleave = function () {
        navigation.classList.remove('butMenu-hover');
    };
})();

在你的CSS中：

.navigation.butMenu-hover .navigationButton-icon {
    display: block;
}

CSS 水平菜单不起作用

CSS horizontal menu doesnt work

html

css

drop-down-menu

css-grid