javascript - 如何在 JS/Jquery 中组合几个 hover 元素

Question

我是一名新手网页设计师，我开始为网站目的学习 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>

Answer 1

语法 $(firstElement, secondElement) 不会选择两个元素。它选择 firstElement within secondElement，即它等同于 $(secondElement).find(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")
    });
}