将鼠标悬停在子菜单上后保持父菜单项突出显示 (HTML/CSS/Jquery)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16802823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keep parent menu item highlighted after hovering over submenu (HTML/CSS/Jquery)
提问by Fygo
I have a menu with the possibility that some menu items will have subitems. Pretty simple, actually. I would like to achieve that once the submenu is moused over, the corresponding (parent) menu item is highlighted as well. This never happens because seems like as soon as the mouse leaves the menu item and gets over the submenu, the browser styles it to its default style. Any help appreciated! Thanks a lot!
我有一个菜单，有些菜单项可能会有子项。其实很简单。我想实现的是，一旦将鼠标悬停在子菜单上，相应的（父）菜单项也会突出显示。这永远不会发生，因为似乎只要鼠标离开菜单项并越过子菜单，浏览器就会将其设置为默认样式。任何帮助表示赞赏！非常感谢！
Menu html:
菜单 html：
<div id="top_navigation">
<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a>
<ul class="submenu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li class="selected_menu_item"><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>
</div>
CSS:
CSS：
#top_navigation {
width: 1248px;
margin: 0 auto;
position: relative;
text-transform: uppercase;
font-family: "Rounded Font", sans-serif;
font-size: 23px;
}
#top_navigation ul ul {
display: none;
}
#top_navigation ul {
padding-left: 0;
}
#top_navigation ul li {
margin: 0;
padding: 0;
float: left;
width: 312px;
height: 64px;
line-height: 64px;
font-size: 20px;
list-style: none;
}
#top_navigation ul li a {
display: block;
text-align: center;
text-decoration: none;
color: #eb1f10;
background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
background-color: #eb1f10;
color: #FFF;
}
#top_navigation ul li a:hover {
background-color: #eb1f10;
color: #FFF;
}
#top_navigation li li {
height: 42px;
line-height: 42px;
border-top: #eb1f10 1px solid;
}
JS/Jquery:
JS/Jquery：
$(document).ready(function () {
var $nav = $('#top_navigation > ul > li');
$nav.hover(
function() {
$('ul', this).stop(true, true).slideDown('fast');
},
function() {
$('ul', this).slideUp('fast');
}
);
});
Example can be found here: http://jsfiddle.net/qguTz/
示例可以在这里找到：http: //jsfiddle.net/qguTz/
回答by Fygo
Oh, now I don't know how this didn't occur to me before... I will answer it:
哦，现在我不知道我以前怎么没有发生过……我来回答一下：
It is enough to swap this:
交换这个就足够了：
#top_navigation ul li a:hover {
background-color: #eb1f10;
color: #FFF;
}
for this:
为了这：
#top_navigation ul li:hover > a {
background-color: #eb1f10;
color: #FFF;
}
回答by Karl-André Gagnon
To achieve that, you need two little modification.
要实现这一点，您需要进行两个小的修改。
First one is the CSS. I added a selector to an already existing style declaration :
第一个是CSS。我在已经存在的样式声明中添加了一个选择器：
#top_navigation ul li a:hover, #top_navigation ul li a.hovered {
background-color: #eb1f10;
color: #FFF;
}
Then i changed the css to add that class :
然后我更改了 css 以添加该类：
$nav.hover(
function() {
$(this).children('a').addClass('hovered')
$('ul', this).stop(true, true).slideDown('fast');
},
function() {
$(this).children('a').removeClass('hovered')
$('ul', this).slideUp('fast');
}
);
Then, everything worked! http://jsfiddle.net/qguTz/6/
然后，一切正常！ http://jsfiddle.net/qguTz/6/
回答by kraysak
$nav.hover(
function() {
$('ul', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#eb1f10", "color":"#FFF"});
},
function() {
$('ul', this).slideUp('fast');
$('a',this).first().css({"background-color":"#FFF", "color":"#eb1f10"});
}
