Question

我正在寻找一种在桌面上悬停时激活导航菜单的方法。

我找到了Bootstrap v3的片段，但我发现这些代码都没有翻译成v4。

这是我的导航HTML＆amp; http://beaudeelashbar.com的CSS：

    <nav class="navbar navbar-dark fixed-top scrolling-navbar">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapseEx2" aria-controls="collapseEx2" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="index.html">
        </a>
        <div class="collapse navbar-collapse" id="collapseEx2">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="http://beaudeelashbar.com/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://beaudeelashbar.com/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://beaudeelashbar.com/packages">Packages & Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://beaudeelashbar.com/faq">FAQ</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://beaudeelashbar.com/#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

.navbar:hover .nabvar-collapse {
display: block;
}

.navbar .navbar-collapse {
background-color: rgba(0, 0, 0, 0.2);
width: 200px;
float: right;
margin-top: 47px;
margin-right: -17px;
}

.navbar-dark .navbar-nav .nav-link {
color: #fff;
}

.nav-item {
padding-right: 15px;
}

.nav-link {
float: right;
}

.scrolling-navbar {
    -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
    transition: background .5s ease-in-out, padding .5s ease-in-out;
    height: 55px;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: none;
}

.top-nav-collapse {
background-color: transparent;
}

Answer 1

试试此代码

button.navbar-toggler:hover ~ .navbar-collapse {
    display: block;
}

最好尝试使用 <ul> 和 <li> 进行下拉，因为仅当我们悬停按钮元素时才会显示下拉列表。这不是我们所说的需要。因此，最好使用 <ul> 和 <li> 元素创建下拉列表。

希望这有效..

如何在Bootstrap 4中悬停时激活导航下拉列表？

1 个答案: