Question

我正在尝试为主链接添加背景颜色，这显示了一个子菜单。现在只显示子菜单，只要鼠标离开主链接，颜色就会恢复原来的背景颜色。

    <nav>
        <ul id="nav">
            <li><a href="index.php">home</a>
            </li>
            <li><a href="intro.php">intro</a>
            </li>
            <li id="services"><a href="#">services</a>
                <ul id="subMenu">
                    <li><span>one</span></li>
                    <li><span>two</span></li>
                </ul>
            </li>
            <li><a href="contact.php">contacts</a>
            </li>
        </ul>
    </nav>

<style>
#services {background:yellow;}
#subMenu {position:absolute;display:none;width:250px;}
#subMenu li {border:none;display:list-item!important;width:100%;background:#e13b30;}
#subMenu li span {color:#fff!important;line-height:50px;}
.bgRed {background-color:#e13b30;}
</style>

<script>
$(function(){
    $('#nav #services').hover(
        function () {
            //show its submenu
            $('#services', this).stop().addClass('bgRed'),
            $('ul', this).stop().slideDown(100);
        }, 
        function () {
            //hide its submenu
            $('ul', this).stop().slideUp(10);
        }
    );

});
</script>

Answer 1

使用类似的东西

$('#nav #services').hover(
        function () {
            //show its submenu
            $(this).find("a").toggleClass('bgRed').stop();
            $('ul', this).stop().slideDown(100);
        }, 
        function () {
            //hide its submenu
            $(this).find("a").toggleClass('bgRed').stop();
            $('ul', this).stop().slideUp(10);
        }
    );

您的班级定义也有错误

.bgRed{background-color,#e13b30;}

应该是

.bgRed{background-color:#e13b30;}请注意:

Fiddle

Answer 2

将以下内容添加到您的脚本

 $('#submenu').hover(
    function () {
        //highlight parent
        $(this).parent().addClass('bgRed');
    }, 
    function () {
        //un - highlight parent
        $(this).parent().removeClass('bgRed');
    }
);

更新：Fiddle 在您从问题中删除removeClass的奇怪更新之后，我在小提琴中检查了代码，

在下面的代码中

 $('#services', this).stop().addClass('bgRed')

您正在传递this作为上下文。因此，JQuery将在services内搜索标识为this的元素，该元素引用#services元素本身。因此它不会工作。

stop()似乎也没必要..

Answer 3

您也可以通过CSS实现此目的，并且不需要脚本..请检查Fiddle

jQuery在悬停时添加背景颜色，鼠标悬停子菜单时背景停留？

3 个答案: