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>

Haven还没有创建课程，而不是那应该重要吗？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

3 个答案: