jquery .parent(） 到 ul 的目标父 li

jquery .parent() to target parent li of ul

本文关键字：目标 li ul parent jquery      更新时间：2023-09-26

嗨，我只是在学习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 放在 LI 中，基本上我希望父 LI 在浏览已下拉的菜单时保持悬停状态。

如果您能告诉我如何在悬停恢复正常状态之前将悬停延迟 250 毫秒，则加分

编辑：澄清一下，上面的jQuery无法使我的父李保持悬停状态

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

为了避免在 CSS 中与 ：hover 发生任何冲突，只需添加 ！重要

.navi li:hover{
   background : #222 !important;
}
相关文章：