Question

嗨我刚刚学习jquery

所以基本上我用下拉菜单进行导航。

我的问题是我的导航悬停以使背景为＃222，但是一旦我将鼠标移动到现在已经下降的菜单，悬停效果就会消失。

这是jquery

$('.navi li ul').each(function() {
    $(this).hover(
    function() {
        $(this).parent('li').css({ 'background-color' : '#222',
                               'color' : '#FFFFFF'});
    },
    function() {
        $(this).parent('li').css({ 'background-color' : '',
                               'color' : '#0085ac'
                             });
    });
}); //end ul parrent hover

html是

            <ul class="navi">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Portfolio</a>
                    <ul>
                        <li><a href="#">logos</a></li>
                        <li><a href="#">Business Cards</a></li>
                        <li><a href="#">Websites</a></li>
                    </ul>
                </li>
                <li><a href="#">Services</a></li>
                <li><a href="#" style="background-image:none;">Contact</a></li>
            </ul>

你可以看到我在里面有我的ul，基本上我希望父李在浏览已经掉落的菜单时保持其悬停状态。

奖励积分如果你可以告诉我如何在它恢复正常状态之前将悬停时间延长250毫秒

编辑：只是为了澄清，上面的jquery无法使我的父李保持其悬停状态

Answer 1

$(document).ready(function(){
    $( ".navi li" ).has( "ul" ).mousemove(function(){
    $(this).css('background','#222');
    });
    $( ".navi li" ).has( "ul" ).mouseleave(function(){
    $(this).css('background','#fff');
    });
});

并避免与之相冲突：在css中悬停只需添加！important

.navi li:hover{
   background : #222 !important;
}

jquery .parent（）来定位ul的父li

1 个答案: