Javascript 如何在JS/Jquery中组合多个悬停元素

我是一名网络设计师新手，我正在开始学习用于网站目的的JavaScript。在我最近的项目中，我遇到了一个问题。创建菜单时，我想突出显示鼠标悬停并单击的特定元素

function hoverAndActive(firstElement, secondElement){
$(firstElement, secondElement).hover(function(){
        $(firstElement, secondElement).toggleClass("hoverMenu");
    }).mousedown(function(){
        $(firstElement, secondElement).addClass("activeMenu");
    }).mouseup(function(){
        $(firstElement, secondElement).removeClass("activeMenu");
    }).mouseleave(function(){
        $(firstElement, secondElement).removeClass("activeMenu")
    });
}

hoverAndActive("#home","#hometext");
hoverAndActive("#bio","#biotext");
hoverAndActive("#contact","#contacttext");

我想为每个菜单元素创建悬停和鼠标单击的结构。虽然我可以通过重复函数中的结构来实现它，但我不知道如何编写一次函数，只为每个菜单项输入id。我想通过JS而不是CSS来实现这一点，因为每对ID都位于html中非常不同的位置。

感谢您的关注：）
阿斯格·克耶尔德森

编辑：将#添加到函数中。措辞

编辑：添加HTML:

<div id="navigation">
    <div id="menu">
        <a href="#BodyHead"><div id="home" class="button"><img src="img/home.png"></div></a>
        <a href="#Test"><div id="bio" class="button"><img src="img/bio.png"></div></a>
        <a href="#"><div id="contact" class="button"><img src="img/contact.png"></div></a>
    </div>
    <div id="menutext">
        <a href="#BodyHead"><div id="hometext" class="button"><p>HJEM</p></div></a>
        <a href="#Test"><div id="biotext" class="button"><p>BIOGRAFI</p></div></a>
        <a href="#"><div id="contacttext" class="button"><p>KONTAKT</p></div></a>
    </div>
</div>

语法
$（firstElement，secondElement）
不会同时选择两个元素。它在
secondElement
中选择
firstElement
，即它相当于
$（secondElement）。查找（firstElement）

如果要组合多个选择器，它们需要位于单个选择器字符串中，用逗号分隔

function hoverAndActive(firstElement, secondElement){
    var bothItems = $(firstElement + ',' + secondElement);
    bothItems.hover(function(){
        bothItems.toggleClass("hoverMenu");
    }).mousedown(function(){
        bothItems.addClass("activeMenu");
    }).mouseup(function(){
        bothItems.removeClass("activeMenu");
    }).mouseleave(function(){
        bothItems.removeClass("activeMenu")
    });
}

语法
$（firstElement，secondElement）
不会同时选择两个元素。它在
secondElement
中选择
firstElement
，即它相当于
$（secondElement）。查找（firstElement）

如果要组合多个选择器，它们需要位于单个选择器字符串中，用逗号分隔

function hoverAndActive(firstElement, secondElement){
    var bothItems = $(firstElement + ',' + secondElement);
    bothItems.hover(function(){
        bothItems.toggleClass("hoverMenu");
    }).mousedown(function(){
        bothItems.addClass("activeMenu");
    }).mouseup(function(){
        bothItems.removeClass("activeMenu");
    }).mouseleave(function(){
        bothItems.removeClass("activeMenu")
    });
}

如果要将元素的ID放入函数中，则选择器中仍然需要
。ie
hoverAndActive（“#home”、“#hometext”）我明白你的意思，但仍然不起作用。你能把你的HTML添加到你的问题中吗？这将有助于找到问题使用CSS悬停有什么问题？也就是说，
#home:hover{…}
-顺便说一句，你也可以使用CSS进行mousedown，也就是说，
#home:active{…}
-这将根据需要添加/删除类（自动，通过浏览器），我希望位于不同位置的几个元素可以获得highlightet。我在CSS中找到了几种方法来实现这一点，但只有当元素是同级元素时才可以。如果要将元素的ID放入函数中，则仍然需要在选择器中使用
。ie
hoverAndActive（“#home”、“#hometext”）我明白你的意思，但仍然不起作用。你能把你的HTML添加到你的问题中吗？这将有助于找到问题使用CSS悬停有什么问题？也就是说，
#home:hover{…}
-顺便说一句，你也可以使用CSS进行mousedown，也就是说，
#home:active{…}
-这将根据需要添加/删除类（自动，通过浏览器），我希望位于不同位置的几个元素可以获得highlightet。我在CSS中找到了几种方法来实现这一点，但前提是元素是兄弟元素。真的很好的洞察力。我改变了这一点，理解了你的观点，但脚本仍然不起作用。似乎对我有用。看看这本书。如果您将鼠标悬停在“图像”上，您可以看到它以红色突出显示链接。@AsgerKjeldsen您在调用
toggleClass
、
addClass
和
removeClass
时没有使用
bothItems
。非常感谢，它现在可以工作了。我不习惯编码，所以这真的帮了我不少忙。谢谢你们花时间回答：）真好的洞察力。我改变了这一点，理解了你的观点，但脚本仍然不起作用。似乎对我有用。看看这本书。如果您将鼠标悬停在“图像”上，您可以看到它以红色突出显示链接。@AsgerKjeldsen您在调用
toggleClass
、
addClass
和
removeClass
时没有使用
bothItems
。非常感谢，它现在可以工作了。我不习惯编码，所以这真的帮了我不少忙。谢谢你们花时间回答：）