Question

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

我使用CSS3 Grid-System。我不知道这是不是问题？首先，这是我的代码：首先是一个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水平菜单不起作用

1 个答案: