当鼠标悬停时，改变与id和类相关的元素样式

change style of element when hover another related with id and class

本文关键字：样式 元素 id 悬停 鼠标 改变      更新时间：2023-09-26

我想改变颜色或任何样式(添加类)我的第一个菜单项，当我悬停在我的第二个菜单(子菜单)元素(并删除类时不悬停)。这些菜单与id和class属性相关。我有一些问题。

我的HTML: 

<ul id="main-menu" class="mmenu">
<li class="mzr-drop panel-menu">
    <a class="menu-item menu-item-238" href="#">First</a>
    <a class="menu-item menu-item-243 active" href="#">Second</a>
    <a class="menu-item menu-item-246" href="#">Third</a>
    <div id="bg_menu_main" class="bg_menu">
            <div class="menu-header">
                <ul id="menu-main-nav-1" class="menu">
                    <li class="menu-item menu-item-238">
                        <ul class="sub-menu">
                        <li id="menu-item-239" class="menu-item menu-item-239">Item</li>
                        <li id="menu-item-240" class="menu-item menu-item-240">Item</li>
                        <li id="menu-item-241" class="menu-item menu-item-241">Item</li>
                        <li id="menu-item-242" class="menu-item menu-item-242">Item</li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-243">
                        <ul class="sub-menu">
                        <li id="menu-item-244" class="menu-item menu-item-244">Item</li>
                        <li id="menu-item-245" class="menu-item menu-item-245">Item</li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-246">
                        <ul class="sub-menu">
                        <li id="menu-item-247" class="menu-item menu-item-247">Item</li>
                        <li id="menu-item-248" class="menu-item menu-item-248">Item</li>
                        <li id="menu-item-249" class="menu-item menu-item-249">Item</li>
                        <li id="menu-item-250" class="menu-item menu-item-250">Item</li>
                        </ul>
                    </li>
                </ul>
            </div>
    </div>
</li>


$('ul#menu-main-nav-1 li').hover(function () {
    var id = $(this).attr('id');
    $('#main-menu li.panel-menu').find('a.menu-item-'+id).addClass('hover');
});

它不工作。我忘记了什么?请帮助。由于

试试这个

$('ul#menu-main-nav-1 li').find('li[id^="menu-item-"]').hover(function () {
    var id = $(this).attr('id');
    $('#main-menu li.panel-menu').find('a.'+id).addClass('hover');
});

通过查看你的标记，我猜你认为id只给出一个整数，但id之前是"menu-item-"，所以你的选择器将是"menu-item-menu-item-xxx"，试着改变你的代码:

$('#main-menu li.panel-menu').find('a.' + id).addClass('hover');

或者更少的代码:

$('#main-menu li.panel-menu a.' + id).addClass('hover');

Edit:似乎根本没有<a>标签，所以这不能工作。查找li:

$('#main-menu li.panel-menu.' + id).addClass('hover');

find('a.menu-item-'+id) <<<</p>

如果id是"menu-item-247"

变成了"a.menu-item-menu-item-247"

相关文章：