Question

我正在使用Bootstrap 4，并创建了一个具有大型下拉菜单的导航，使用animate.css作为下拉CSS动画，并在主导航元素上使用CSS转换（下划线）。

当用户将鼠标悬停在子菜单/下拉菜单上时，是否可以将主导航加下划线？在这种情况下，将鼠标悬停在下拉列表上时，请将“服务”主导航元素加下划线。如果可能的话，我想保持纯CSS，但如果没有，请打开使用jQuery。

这是导航的HTML：

<nav class="navbar navbar-expand-lg navbar-light" role="navigation">
    <div class="navbar-brand">
        Logo
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#global-navbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="global-navbar">
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link main-nav-link" href="#" @*role="button" data-toggle="dropdown"*@>
                    Services
                    <span class="navigation-underline animated slideInLeft"></span>
                </a>
                <div class="dropdown-menu animated fadeIn">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-3">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Service 1</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Service 2</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Service 3</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-3">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Service 4</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Service 5</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Service 6</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-3">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Service 7</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Service 8</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Service 9</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-3 border-right-0">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Service 10</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Service 11</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Service 12</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <!-- more <li>s -->
        </ul>
    </div>
</nav>

这是我的CSS：

@media screen and (min-width: 992px) {

/* Link column styling  */
.navbar .dropdown-menu div[class*="col"] { margin-top: 1em; margin-bottom: 1em; border-right: 1px solid #ffffff; }
.navbar .dropdown-menu { border: none; background-color: #e5e5e5 !important; }

.navbar { font-size: .9em; padding-top: 0px; padding-bottom: 0px; }
.navbar .navbar-brand { padding-top: 0; padding-bottom: 0; }

/* Add padding to keep hover working when mousing to menu */
.navbar .nav-item { padding: .75em .5em 0 .5em; margin: 0 .25em; }

/* Dropdown full width  */
.navbar .dropdown { position: static; }
.navbar .dropdown-menu { width: 100%; left: 0; right: 0; /*  Height of nav-item -->  */ top: 67px; border-radius: 0; }
.navbar .dropdown-menu .dropdown-menu-heading { padding-left: .5em; text-transform: uppercase; font-weight: 700; color: #424242; }

/* Show dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu,
.navbar .dropdown .dropdown-menu:hover { -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-delay: .3s; animation-delay: .3s; display: block; }

/* Less padding on dropdown menu items and links  */
.navbar .navbar-nav .nav.flex-column .nav-link { padding-top: 2px; }
.navbar .dropdown .dropdown-menu .flex-column li.nav-item { padding: 0; }

/* Animate border-bottom for links */
.navbar .navbar-nav .nav-link.main-nav-link::after { content: ''; display: block; width: 0%; height: 2px; background: #eb2b2c; transition: width .3s; }
.navbar .navbar-nav .nav-link.main-nav-link:hover::after { width: 100%; }

}

Answer 1

由于.nav-item .dropdown元素在单击时会获得额外的.show类，因此您可以使用以下css维护带下划线的效果：

.nav-item.dropdown.show > .nav-link::after {
    width: 100%;
}

或者，你也可以使用这个：

.nav-item.dropdown:hover > .nav-link::after {
    width: 100%;
}

但是，由于.nav-link和.dropdown-menu之间存在差距，因此当光标在菜单项和下拉列表之间移动时，不会设置:hover状态。

将鼠标悬停在下拉列表上时，保持主导航项目悬停CSS

1 个答案: