Javascript 悬停时的Jquery将类添加到另一个元素根本不起作用

我很感激这里有很多类似的帖子，但似乎没有一篇能够解释为什么这个代码不起作用

这个想法是，当菜单悬停时，菜单的背景应该使用CSS进行更改

我在StackOverflow上找到了密码

但在我的例子中，即使在页脚的最末端运行，它也不起作用

<script>
   jQuery(document).ready(function() {
     jQuery('#responsive-menu-item-48473').hover(function(){     
           jQuery('#responsive-menu-container').addClass('blue');    
       },function(){    
          jQuery('#responsive-menu-container').removeClass('blue');     
       });
   });
</script>

jQuery（文档）.ready（函数（）{
jQuery（'#responsive-menu-item-48473'）。悬停（function（）{
jQuery（“#响应菜单容器”）.addClass（'blue'）；
}，函数（）{
jQuery（“#响应菜单容器”）.removeClass（'blue'）；
});
});

其他信息

减少菜单的html：

<button id="responsive-menu-button" class="responsive-menu-button responsive-menu-boring responsive-menu-accessible" type="button" aria-label="Menu">                
    <span class="responsive-menu-label responsive-menu-label-left">
        <span class="responsive-menu-button-text">Menu</span>
    </span>

    <span class="responsive-menu-box">
        <span class="responsive-menu-inner"></span>
    </span>                
</button>

<div id="responsive-menu-container" class="slide-left">
    <div id="responsive-menu-wrapper">
        <div id="responsive-menu-title">
            Main Menu
        </div>

        <ul id="responsive-menu" class="">
            <li id="responsive-menu-item-57071" class=" menu-item menu-item-type-custom menu-item-object-custom responsive-menu-item"><a href="http://localhost/wordpress-updates/fx/my-account/customer-logout/" class="responsive-menu-item-link">Logout</a></li>
            <li id="responsive-menu-item-48473" class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-16137 current_page_item responsive-menu-item responsive-menu-current-item"><a title="Home" href="http://localhost/wordpress-updates/" class="responsive-menu-item-link">Home</a></li>
        </ul>
    </div>
</div>

菜单
主菜单

---

到目前为止还没有创建类，这不重要吗？

看起来代码是正确的

---

CSS规则可能不正确，无法反映更改。尝试检查元素并将鼠标悬停在

jQuery（“#responsive-menu-item-48473”）

看起来代码是正确的

---

CSS规则可能不正确，无法反映更改。尝试检查元素并将鼠标悬停在

jQuery（'#responsive-menu-item-48473'）

它正在工作检查她，我想你没有添加jQuery

jQuery（文档）.ready（函数（）{
jQuery（'#responsive-menu-item-48473'）。悬停（function（）{
jQuery（“#响应菜单容器”）.addClass（'blue'）；
}，函数（）{
jQuery（“#响应菜单容器”）.removeClass（'blue'）；
});
});
.blue{
背景色：#0000ff；}

菜单
主菜单




正在运行检查她，我认为您没有添加jquery


jQuery（文档）.ready（函数（）{
jQuery（'#responsive-menu-item-48473'）。悬停（function（）{
jQuery（“#响应菜单容器”）.addClass（'blue'）；
}，函数（）{
jQuery（“#响应菜单容器”）.removeClass（'blue'）；
});
});
.blue{
背景色：#0000ff；}

菜单
主菜单




它工作正常


jQuery（文档）.ready（函数（）{
jQuery（'#responsive-menu-item-48473'）。悬停（function（）{
jQuery（“#响应菜单容器”）.addClass（'blue'）；
}，函数（）{
jQuery（“#响应菜单容器”）.removeClass（'blue'）；
});
});
.blue{
颜色：绿色；
背景：红色；
}

菜单
主菜单




它工作正常


jQuery（文档）.ready（函数（）{
jQuery（'#responsive-menu-item-48473'）。悬停（function（）{
jQuery（“#响应菜单容器”）.addClass（'blue'）；
}，函数（）{
jQuery（“#响应菜单容器”）.removeClass（'blue'）；
});
});
.blue{
颜色：绿色；
背景：红色；
}

菜单
主菜单