将鼠标悬停在子菜单上后保持父菜单项突出显示 (HTML/CSS/Jquery) [英] Keep parent menu item highlighted after hovering over submenu (HTML/CSS/Jquery)

问题描述

我有一个菜单，有些菜单项可能会有子项.其实很简单.我想实现的是，一旦将鼠标悬停在子菜单上，相应的(父)菜单项也会突出显示.这永远不会发生，因为似乎只要鼠标离开菜单项并越过子菜单，浏览器就会将其设置为默认样式.任何帮助表示赞赏！非常感谢！

菜单html:

<ul><li><a href="#">item1</a></li><li><a href="#">item2</a><ul class="子菜单"><li><a href="#">sub1</a></li><li><a href="#">sub2</a></li><li class="selected_menu_item"><a href="#">sub3</a></li><li><a href="#">item3</a></li><li><a href="#">item4</a></li>

CSS:

#top_navigation {宽度:1248px；边距:0 自动；位置:相对；文本转换:大写；字体系列:圆形字体"，无衬线；字体大小:23px；}#top_navigation ul ul {显示:无；}#top_navigation ul {填充左:0;}#top_navigation ul li {边距:0；填充:0；向左飘浮;宽度:312px；高度:64px；行高:64px；字体大小:20px；列表样式:无；}#top_navigation ul li a {显示:块；文本对齐:居中；文字装饰:无；颜色:#eb1f10；背景颜色:#FFF；}#top_navigation ul li.selected_menu_item a {背景颜色:#eb1f10；颜色:#FFF；}#top_navigation ul li a:hover {背景颜色:#eb1f10；颜色:#FFF；}#top_navigation li li {高度:42px；行高:42px；边框顶部:#eb1f10 1px 实心；}

JS/Jquery:

$(document).ready(function () {var $nav = $('#top_navigation > ul > li');$nav.hover(功能() {$('ul', this).stop(true, true).slideDown('fast');},功能() {$('ul', this).slideUp('fast');});});

示例可以在这里找到:http://jsfiddle.net/qguTz/

解决方案

哦，现在我不知道我以前怎么没有想到这个...我来回答一下:

换这个就够了:

#top_navigation ul li a:hover {背景颜色:#eb1f10；颜色:#FFF；}

为此:

#top_navigation ul li:hover >一个 {背景颜色:#eb1f10；颜色:#FFF；}

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:

<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:

#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:

$(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/

解决方案

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;
}

这篇关于将鼠标悬停在子菜单上后保持父菜单项突出显示 (HTML/CSS/Jquery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！