Question

好，那就是问题所在：我希望将鼠标悬停在每个导航项上时显示一个面板。但这只是行不通。

html：

window.ClipboardJS = require './modules/clipboardjs'

这是CSS：

         <nav class="row">
                <ul class="nav header-nav">
                    <li>
                        <a href="#">item 1</a>
                    </li>
                    <li>
                        <a href="#">item 2</a>
                    </li>
                     <li>
                        <a href="#">item 3</a>
                    </li>
                </ul>  
            </nav>
            <div class="dropdown-parent">
                <div class="dropdown-panel row">

                </div>  
            </div>

所以我在悬停动画上制作了一个简单的CSS来显示.dropdown-parent：

.header-nav{
    height: 80px;
    width:100%; 
    display: flex;
    justify-content: space-between;
    li{
        background-color:$honey;   
        position: relative;  
        height:77px;  
        width:9.8%;
        margin:1px; 
        margin-top:0px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow: inset 0 0 10px 0px black;

        a{
            color:black;
            text-decoration: none;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
        }
    }
}

.dropdown-parent{
    text-align: center;
    display:none;
    .dropdown-panel{
        margin-top:2px;
        padding-top:50px;
        padding-bottom:50px;
        display:inline-block;
        width:95%;
        height: auto;
        background-color:white;
        z-index:1;
        box-shadow: inset 0 0 10px 0px black;
    }
}

不幸的是，它没有用，我无法查明原因。我什至试图通过使用jquery来绕过此问题，但这似乎也无济于事...

.header-nav{
    li{
        &:hover{
            .dropdown-parent{
                display:block !important;
            }
        }
    }
}

}）;

那么这是怎么回事？

Answer 1

您无法在CSS中完成此操作，因为CSS不能这样工作-它是级联样式表，这意味着您无法控制不是选择器子级的元素，在这种情况下，您无法控制header-nav和{ {1}}甚至都不是兄弟姐妹。您的JS解决方案应该可以很好地工作，但是那里的选择器错误，应该是：

dropdown-parent

Answer 2

CSS无法工作，因为.dropdown-parent不是列表项的子项

JS方法不起作用，因为两个选择器都错误（缺少点.，它们是类名而不是元素）

$(document).ready(function(){
  $(".header-nav li").hover(function(){
    $(".dropdown-parent").css("display", "block");
  });
});

悬停时将“ display：none”更改为“ display：block”不起作用

2 个答案: