悬停在下拉菜单上时保持主导航项悬停 CSS

Posted 2023-03-06

【中文标题】悬停在下拉菜单上时保持主导航项悬停 CSS

【英文标题】：Keep main nav item hover CSS when hovering over dropdown

【发布时间】：2018-06-29 03:29:42

【问题描述】：

我正在使用 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%; 

【参考方案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 状态。

【讨论】：

由于没有点击下拉菜单，替代方案完美运行，谢谢！