在下拉列表的父级上保持“悬停"状态 [英] 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?
因此,如果我将鼠标悬停在下拉菜单元素上,我还能在Hover over me
链接上保留灰色背景吗?
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屋!
查看全文