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

Question

我很欣赏这里有许多类似的帖子，但似乎没有一个可以解决此代码不起作用的原因。

这个想法是，当一个菜单 li 悬停时，菜单的背景应该使用 CSS 改变。

我在 StackOverflow 上找到了代码

add class to a div when hover another one (Javascript)

但在我的情况下，即使在页脚的最后运行它也无法正常工作。

<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>

其他信息...

为菜单删减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>

还没有创建类，这不重要吗？

Answer 1

正在检查她，我想你错过了添加 jquery

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

.blue{
background-color:#0000ff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

看起来代码是正确的.....

CSS 规则 可能不正确，无法反映更改。尝试检查元素并将鼠标悬停在jQuery('#responsive-menu-item-48473')

Answer 3

它工作得很好。

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

.blue{
color:green;
background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>