保持'悬停'下拉列表的父状态 [英] Maintain 'hover' state on parent of dropdown

问题描述

我正在使用Bootstrap构建导航栏.

I am using Bootstrap to build a navigation bar.

当我将光标移到下拉元素上时，如何保持原始链接的悬停状态?

How do I maintain the original link's hover state when I move the cursor onto to the dropdown element?

因此，如果我将鼠标悬停在dropdown元素上，是否仍可以在将鼠标悬停在我上方链接上保留灰色背景?

So if I hover onto the dropdown element, can I still keep the grey background on the Hover over me link?

当前演示: http://jsfiddle.net/DTcHh/3932/

这是我的代码:

<div class="container">

            <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader">

                <div id="inner-header" class="wrap cf">

                    <nav role="navigation" class="primary col-md-12" itemscope itemtype="http://schema.org/SiteNavigationElement">
                        <ul id="menu-header-menu" class="nav primary top-nav cf navbar-nav">

                            <li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-139 dropdown"><a title="" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true"><span>Hover over me</span> <span class="caret"></span></a>
                            <ul role="menu" class=" dropdown-menu">
                                <li id="menu-item-159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-159"><a title="Sponsors" href="dropdown"><span>Dropdown</span></a></li>
                            </ul>
                            </li>

                        </ul>

                    </nav>

                </div>

            </header>

        </div>

CSS:

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 nav {
    border:1px solid blue;
    float:left;
    text-align:center;
}
nav a {
    color:#000
}
body {
    margin: 10px;
}



@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}


.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}





ul.nav a:hover, a:hover { color: #5a5a5a!important; text-decoration:none}
.dropdown-menu {width:100%}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {background:#fff!important}
.dropdown:hover .dropdown-menu {display: block;}

nav {
text-align:center
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

推荐答案

悬停样式是为 a 标记提供的，因此当您离开 a 时，将标记保留为悬停样式不采用

the hover styles are given for a tag so when you leave a so you leave a tag the hover styles are not taken

您将需要为li提供悬停样式

you will need to give hover styles for li

添加此

ul.nav > li:hover {
  background:#eee;
}

演示- http://jsfiddle.net/DTcHh/3933/

这篇关于保持'悬停'下拉列表的父状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！