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

问题描述

我有一个菜单，有可能某些菜单项将有子项。很简单，实际上。我想实现，一旦子菜单被鼠标悬停，相应的（父）菜单项也被突出显示。这从来没有发生，因为似乎只要鼠标离开菜单项，并超过子菜单，浏览器将其样式为其默认样式。任何帮助赞赏！非常感谢！

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!

菜单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：

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

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

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:

这足以交换这个：

#top_navigation ul li a:hover {
    background-color: #eb1f10;
    color: #FFF;
}

：

#top_navigation ul li:hover > a {
    background-color: #eb1f10;
    color: #FFF;
}

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